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

时间:2018-03-18 01:39:21

标签: javascript angular typescript

我有一个有角度的应用程序。 当用户登录时,我想根据用户的角色显示不同的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'}

这样的条件

1 个答案:

答案 0 :(得分:2)

你创建另一个守卫并将条件置于

之内
    @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]}