当角度应用启动时，路由到不同的组件

Question

我有一个角度应用程序。当用户登录时，我想根据用户的角色显示不同的UI。用户可以只是客户或管理员

在我的路由模块中，我有以下内容

        {path: '', redirectTo: 'admin-portal' , pathMatch: 'full'},
        {path: 'admin-portal', component: AdminPortalComponent, canActivate: [AuthGuard]},
        {path: 'customer-portal', component: CustomerPortalComponent, canActivate: [AuthGuard]}

我希望能够从本地存储中获取变量，并使用它来决定在加载应用程序时重定向用户的位置。我想有一个像{path: '', redirectTo: 1===1 ? 'admin-portal' : 'customer-portal' , pathMatch: 'full'}的条件

Answer 1

你创造了另一个守卫并把条件放在里面

    @Injectable()
    export class LoadGuard implements CanActivate {
      constructor(private router: Router) {

      }

      canActivate(next: ActivatedRouteSnapshot,
                  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        if(1===1){
           this.router.navigate(['admin-portal']);
           return false;
         }else{
           this.router.navigate(['customer-portal']);
           return false;
        }

      }
    }

然后在路线上

{path: '', pathMatch: 'full',component: sampleComponent, canActivate: [LoadGuard]}