如何使用 Guard 保护具有保护条件的 FeatureModule

Question

在 Angular-13 应用程序中，我具有以下角色：

角色：管理员、校长、教师和助理教师

用户只能拥有一个角色。

我有这些守卫：

export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private toastr: ToastrService, private router: Router) { }
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    if (!this.authService.isLoggedIn()) {
      this.toastr.info('Please Log In!');
      this.router.navigate(['/auth']);
      return false;
    }
    this.authService.isLoggedIn();
    return true;
  }
}

export class AdminGuard implements CanActivate {
  checkStatus!: boolean;
  constructor(private authService: AuthService, private toastr: ToastrService, private router: Router) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.checkStatus = this.authService.isAdmin();
  }
}

export class PrincipalGuard implements CanActivate {
  checkStatus!: boolean;
  constructor(private authService: AuthService, private toastr: ToastrService, private router: Router) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      return this.checkStatus = this.authService.isPrincipal();
  }
}

AuthService：

  public isAdmin(): boolean {
    if (localStorage.getItem("role") === "Admin") {
      return true
    } else {
      this.toastr.info('Forbidden!');
      this.router.navigate(['/auth']);
      return false;
    };
  }

  public isPrincipal(): boolean {
    if (localStorage.getItem("role") === "Principal") {
      return true
    } else {
      this.toastr.info('Forbidden!');
      this.router.navigate(['/auth']);
      return false;
    };
  }

我有几个功能模块，例如 AdminModule、TeacherModule，...

下面是我的 app-routing.module：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'auth',
    pathMatch: 'full'
  },
  { path: 'server-error', component: ServerErrorComponent, data: {breadcrumb: 'Server Error'} },
  { path: 'not-found', component: NotFoundComponent, data: {breadcrumb: 'Not Found'} },
  {
    path: 'admin-dashboard',
    canActivate: [AuthGuard, AdminGuard],
  loadChildren: () => import('./feature/admin/admin.module').then(m => m.AdminModule)
},
  { path: '**', redirectTo: 'not-found', pathMatch: 'full' }
];

从上面的代码中，我想用 AuthGuard 和 来保护 AdminModule（管理仪表板） AdminGuard 或校长。这意味着，用户必须具有管理员或主体角色才能访问它。

这意味着 AuthGuard && (AdminGuard || 校长)

如何修改

canActivate：[AuthGuard、AdminGuard]

来实现这个？

谢谢