基于角色在同一路径上延迟加载模块

Question

我正在尝试根据我的角色（当我登录时）加载一个 Angular 模块。我用 Angular Guard 尝试过，但它不起作用，当它失败时，它不会转到下一条路线。

const routes: Routes = [
   {
      path: '',
      loadChildren: () => AuthModule
      // Load when not logged in
   },

   {
      path: '',
      loadChildren: () => AdminModule
      // Load when admin
   },

   {
      path: '',
      loadChildren: () => CrewModule
      // Load when crew
   }
];

关于如何解决这个问题的任何想法？我认为 Angular Guard 或使用匹配器不是解决此问题的正确方法...

编辑：对于每个路径/模块，我都有自己的警卫，如下所示：

import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from '@app/core';

@Injectable()
export class AdminModuleGuard implements CanLoad {
   constructor(private authService: AuthService, private router: Router) {}

   canLoad(route: Route): boolean {
      const url: string = route.path;
      console.log('Admin Module Load Guard - Url:' + url);
      return false;
   }
}

谢谢！

亲切的问候， 亚尼克

Answer 1

您可以通过使用根模块的Injector 访问您的AuthService 实例来完成此操作，然后根据用户的角色做出加载一个模块或另一个模块的异步决定。您可以在 main.ts 文件中引导后立即访问 Injector，然后发布为 RxJs 主题（例如 mySubject$），然后在您的路由定义中使用此主题。

// Get root module's injector and publish it via RxJs subject
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then((m) => mySubject$.next(m.injector)) // <-- here
  .catch((err) => console.error(err));

您可以在 Stackblitz 上找到这种方法的工作示例