Question

我目前正在使用其路由器功能来开发角度应用程序。直到我发现成功登录后，所有路由似乎都运行良好，直到我将其设置为的url路径（即“ / admin”）都遵循，而路由器默认为“ /”。这是代码：

//login.component.ts
if (this.authService.getUserRole() == 'user' || 'agent') {
window.location.assign('/')
} else if (this.authService.getUserRole() == 'admin') {
window.location.assign('/admin')
}



//app.routing.ts
import {AdminComponent} from './admin-master/admin/admin.component;
import {HomeComponent} from './home/home.component;

const appRoutes: Routes = [
{path: '', component: HomeComponent, pathMatch: 'full'},
{path: 'admin', component: AdminComponent, canActivate: [AuthGuard], data: {permission:{only: ['admin']}}}
]

编辑：（添加了auth.guard.ts）

//auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

      const permission = next.data["permission"];

      if(this.authService.isLoggedIn() &&
      permission.only.includes(this.authService.getUserRole())) {
        return true;
      } else {
        this.router.navigateByUrl('/logout');
      }
    
  }
  
}

问题：

尽管已成功登录，但路由器会将用户重定向到空白url，而不是我在login.component.ts文件夹中专门提供的设置URL。
由于它将重定向到一个空URL，因此home.component.html中的元素也会显示在我的管理控制台中，我不想发生这种情况。

总而言之，如何正确路由以下功能？难道我做错了什么？感谢您的帮助！

Answer 1

您可以使用DoSomething而不是Router导航到不同的URL

示例：

window.location.assign

检查文档https://angular.io/api/router/Router

Answer 2

替换window.location.assign（'/ admin'）

使用

this.router.navigate([‘../admin’], {relativeTo: this.route});

router：路由器路线：ActivatedRoute

我希望这就是你想要的。

Answer 3

确定要导航到管理页面吗？我认为您的代码看起来不正确。

if (this.authService.getUserRole() == 'user' || 'agent') {
    window.location.assign('/')
} else if (this.authService.getUserRole() == 'admin') {
    window.location.assign('/admin')
}

它应该像下面这样，否则第一个总是正确的，因为|| 'agent'

const role = this.authService.getUserRole();
if (role  === 'user' || role === 'agent') {
    window.location.assign('/')
} else if (role  === 'admin') {
    window.location.assign('/admin')
}

我也更喜欢===进行值和类型检查。

Answer 4

在我的$date = Get-Date -Format "yyyyMM" Compress-Archive -Path "c:\$date\" -DestinationPath "c:\$date.zip"文件中，我发现从下面的代码中删除app.routing.ts会导致正确的URL重定向。这是由于以下事实：添加{useHash: true}会为我的网址添加一个额外的{useHash: true}，导致默认URL为空白，因为它与任何路由都不匹配。

/#

我已将其修改为：

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true, enableTracing: true });

注意：我也删除了export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);只是为了清理控制台结果。

角路由器不会导航到设置URL，而是导航到空URL路径

4 个答案: