Question

我希望主页为不同的角色加载不同的模块

const routes: Routes = [
      {
        path: 'login',
        component: LoginComponent,
      },
      { path: '', loadChildren: './dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard], canActivate: [AuthGuard], },
      {
        path: '',
        loadChildren: './dashboard/dashboard.module#DashboardModule',
        canActivate: [true]
      },
]

AuthGuard在这里

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('ISTRAINER') === Role.Trainer
    && next.routeConfig.loadChildren === './dashboard/dashboard.module#DashboardModule') {
      return true;
    }
    return false;
  }
  canLoad(route: Route): boolean {
    return false;
  }

何时canLoad：[AuthGuard]返回false 路由器未检查下一条路由

还是有一种方法可以根据Route更改loadChildren

实际上我想在登录时说在路线“仪表板”或“”上，如果已登录学生角色，则将加载学生模块如果登录了Trainer角色，则会在路线“仪表板”或“”上加载Trainer模块如果登录了管理员角色，则在“仪表板”路线或“”路线上加载管理模块

Answer 1

您可以使用角度https://angular.io/api/router/UrlMatcher中的网址匹配器

import { trainerMatcher } from './trainerMatcher'
import { studentMatcher } from './studentMatcher'
{
 path : '',
 matcher : trainerMatcher,
 loadChildren : 'trainerModule',
 canLoad : [AuthGuard]
},
{
 path : '',
 matcher : studentMatcher,
 loadChildren : 'studentModule'
}

像这样，您可以编写一个匹配器，然后在其中检查合适的角色。如果仍要确保无法加载模块，则可以设置防护装置。

我自己遇到了这个问题，发现这篇文章很有帮助： https://medium.com/@lenseg1/loading-different-angular-modules-or-components-on-routes-with-same-path-2bb9ba4b6566

Answer 2

当路径匹配并且角度认为这是您要求的路线时，这是预期的行为。在您的情况下，似乎唯一可行的选择是在角色更改时更新路由配置。请参阅router.resetConfig文档。

带有AuthGuard的多个/仪表板路线，用于不同的角色

2 个答案: