Angular 路由器：根据用户的角色导航到不同的路由 编辑 (2021-04-20)

如何解决Angular 路由器：根据用户的角色导航到不同的路由 编辑 (2021-04-20)

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

• 应用
  • 认证
    • 登录页面
    • 注册页面
    • auth-routing.module.ts

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

    • auth.module.ts
  • 管理员
    • 根页面
    • admin-routing.module.ts

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

    • admin.modules.ts
  • 客户
    • 根页面
    • 目录页
    • 结帐页面
    • 感谢页面
    • customer-routing.module.ts

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

    • customer.module.ts
  • 找不到页面
  • app-routing.module.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')
    );
  }

}