角度路由器：根据用户角色导航到不同的路由

Question

我正在编写一个模拟电子商务应用程序，它具有以下结构：

• 应用程序
  • auth
    • 登录页面
    • 注册页面
    • 身份验证路由模块.ts

      const routes: Routes = [
      {
      path: 'signup',
      component: SignUpPage,
      },
      {
      path: 'signin',
      component: SignInPage,
      },
      ];
      

    • 身份验证模块.ts
  • 管理员
    • 根页面
    • 管理路由模块.ts

      const routes: Routes = [
      {
      path: 'admin',
      component: RootPage,
      children: [
      // ...                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
      ],
      },
      ];
      

    • admin.modules.ts
  • 客户
    • 根页面
    • 目录页
    • 签出页面
    • 感谢页面
    • 客户路由模块.ts

      const routes: Routes = [
      {
      path: 'customer',
      component: RootPage,
      children: [
      { path: 'catalog/:categoryId', component: CatalogPage },
      { path: 'checkout', component: CheckOutPage },
      { path: 'thankyou', component: ThankYouPage },
      ],
      },
      ];
      

    • 客户模块.ts
  • 找不到页面
  • 应用程序路由模块.ts

    const routes: Routes = [
    { path: '**', component: NotFoundPage },
    ];
    

  • app.module.ts
  • app.component.html
  • app.component.css

基本工作流程如下：

0. 用户导航到根路径/
1. 应用程序检测到他们没有登录，因此将他们重定向到/signin
2. 他们输入凭据，然后按登录
3. 如果认证成功，
   1. 如果用户是管理员，他们会被重定向到/admin。
      1. admin-router.module.ts将它们重定向到/admin的某个子路径
   2. 如果用户是客户，他们会被重定向到/customer。
      1. customer-router.module.ts将它们重定向到/customer/catalog/<default category ID>
      2. 他们把一些产品放进购物车，然后进入/customer/checkout
      3. 他们下了订单，然后被重定向到/customer/thankyou

我不确定的是如何在成功登录后完成重定向。显然，它必须分两个阶段完成：首先到一些常见路径，如/，然后根据用户的角色到/customer或/admin。第二阶段可能需要由app-routing.module.ts来处理，可能需要使用一个保护，但我不确定具体如何做到

编辑(2021-04-20(

问题可以总结如下：

我需要的是一种方法(最好是声明性的(，根据其状态将应用程序从/重定向到以下路径之一：

状态	路径
已注销	/auth
以客户身份登录	/customer
以管理员身份登录	/admin

您可以创建一些虚拟组件，并使用处理正确导航的保护程序来保护它。类似这样的东西：

[
{
path: 'loggedin',
component: DummyComponent,
canActivate: [HandleLoginGuard]
},
{
path: 'admin',
component: AdminComponent,
},
{
path: 'customer',
component: CustomerComponent,
}
]

@Injectable()
class HandleLoginGuard implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) {
if(isAdmin()){
route.navigate(/admin);
}else{
route.navigate(/customer);
}
return false;
}
}

通过这种方式，您可以将逻辑放在保护程序中，而不是登录组件中。

我最终做的是：

// app-routing.module.ts
const routes: Routes = [
{
path: '',
canActivate: [AuthorizationGuard],
children: [],
},
{ path: '**', component: NotFoundPage },
];

// authorization.guard.ts
@Injectable({
providedIn: 'root',
})
export class AuthorizationGuard implements CanActivate {
constructor(private router: Router, private authService: AuthService) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): UrlTree {
const user = this.authService.getLoggedInUser();
return (
(user?.role === 'admin' && this.router.parseUrl('/admin')) ||
(user?.role === 'customer' && this.router.parseUrl('/customer')) ||
this.router.parseUrl('/auth')
);
}
}