使用 Lazy Loading 加载模块,在需要时才执行 canActivate 校验。示例代码如下:
// app-routing.module.ts const routes: Routes = [ { path: 'my-module', loadChildren: () => import('./my-module/my-module.module').then((m) => m.MyModuleModule), canActivate: [MyGuard], }, ];
// my-guard.service.ts @Injectable({ providedIn: 'root', }) export class MyGuard implements CanActivate { constructor(private authService: AuthService) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable
// app.module.ts @NgModule({ declarations: [AppComponent], imports: [BrowserModule, RouterModule.forRoot(routes)], providers: [MyGuard, AuthService], bootstrap: [AppComponent], }) export class AppModule {}
// my-module.module.ts @NgModule({ declarations: [MyComponent], imports: [CommonModule, MyRoutingModule], }) export class MyModuleModule {}
// my-routing.module.ts const routes: Routes = [{ path: '', component: MyComponent }];
@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) export class MyRoutingModule {}