javascript - Angular 应用程序启动时路由到不同的组件

Question

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

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

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

我希望能够从本地存储中获取变量并使用它来决定在应用程序加载时将用户重定向到哪里。我正在考虑有一个像 {path: '', redirectTo: 1===1 这样的条件？ '管理门户':'客户门户'，pathMatch:'完整'}

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;
        }

      }
    }

然后在 route

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