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

Question

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

• 应用程序
  • 授权
    • 登录页面
    • 注册页面
    • auth-routing.module.ts

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

    • auth.module.ts
  • 行政
    • 根页面
    • 管理员路由.module.ts

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

    • admin.modules.ts
  • 顾客
    • 根页面
    • 目录页
    • 结帐页面
    • 感谢页面
    • 客户路由.module.ts

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

    • 客户.module.ts
  • 网页未找到
  • 应用程序路由.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

Answer 1

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

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

这样你就可以把逻辑放在一个守卫而不是登录组件中。

Answer 2

我最终做的是：

// 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')
    );
  }

}