如何在Angular懒加载路由中全局配置canDeactivate守卫

最优方案：利用路由守卫的继承特性 #

Angular路由的守卫支持继承，只需在最顶层的父路由上添加你的GlobalCanDeactivateGuard，所有子路由（包括多层嵌套的懒加载路由）都会自动继承这个守卫，无需逐个手动配置。

步骤：

1. 修改根路由配置，在包含所有子路由的顶层路由对象上添加canDeactivate守卫。
2. 移除所有子路由中手动添加的canDeactivate配置。

修改后的代码示例：

根路由（app-routing.module.ts）

const routes: Routes = [
  {
    path: '',
    canDeactivate: [GlobalCanDeactivateGuard], // 全局绑定守卫
    children: [
      {
        path: 'community/:id',
        loadChildren: () => import('./pages/community/community.module').then((m) => m.CommunityModule),
        canActivate: [CommunityGuard]
        // 移除原有的canDeactivate配置
      },
      // 其他所有子路由都无需再手动添加守卫
    ]
  },
];

社区模块路由（community-routing.module.ts）

const routes: Routes = [
  {
    path: '',
    component: CommunityComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: () => import('./categories/dashboard/dashboard.module').then((m) => m.DashboardModule)
        // 移除原有的canDeactivate配置
      },
      // 其他子路由同理
    ]
  },
];

原理说明：

当用户尝试导航离开任何子路由时，Angular会依次触发父路由到当前路由的所有canDeactivate守卫。顶层父路由的守卫会覆盖所有子路由的导航检查，只要模态框处于打开状态，就会阻止任何导航操作（包括浏览器前进/后退）。

如果需要给特定路由排除这个守卫，只需在该路由上显式设置canDeactivate: []即可覆盖父路由的配置。

备选方案：通过APP_INITIALIZER自动遍历路由添加守卫 #

如果你的路由结构无法通过父路由继承实现（比如存在多个独立的顶层路由），可以使用APP_INITIALIZER在应用初始化时自动遍历所有路由，为懒加载路由添加守卫。

实现代码：

1. 创建路由配置服务：

@Injectable({ providedIn: 'root' })
export class RouteConfigService {
  constructor(
    private router: Router,
    private globalDeactivateGuard: GlobalCanDeactivateGuard
  ) {}

  configureGlobalGuards(): void {
    const addGuardToRoutes = (routes: Routes) => {
      routes.forEach(route => {
        // 为懒加载路由添加守卫
        if (route.loadChildren) {
          route.canDeactivate = route.canDeactivate || [];
          if (!route.canDeactivate.includes(this.globalDeactivateGuard)) {
            route.canDeactivate.push(this.globalDeactivateGuard);
          }
        }
        // 递归处理子路由
        if (route.children?.length) {
          addGuardToRoutes(route.children);
        }
      });
    };

    addGuardToRoutes(this.router.config);
  }
}

2. 在根模块中配置APP_INITIALIZER：

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (configService: RouteConfigService) => () => configService.configureGlobalGuards(),
      deps: [RouteConfigService],
      multi: true
    }
  ]
})
export class AppModule {}

这个方法会在应用启动时自动遍历所有已定义的路由，为每个懒加载路由添加你的全局守卫，无需手动修改路由配置。

内容的提问来源于stack exchange，提问作者Tim Bunk