如何消除 Angular 中 canActivate/canDeactivate 的冗长模式？

Question

我的路由是这样设置的（主父节点和一堆子子节点）。

export const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "profile", component: ProfileComponent },
  {
    path: ":itemId", component: TabsComponent, children: [
      { path: "a", component: ComponentA, canActivate: [MsalGuard], canDeactivate: guard },
      { path: "b", component: ComponentB, canActivate: [MsalGuard], canDeactivate: guard },
      { path: "c", component: ComponentC, canActivate: [MsalGuard], canDeactivate: guard },
      ...
    ], canActivate: [MsalGuard]
  },
  ...
  { path: "**", component: BoomComponent },
];

我注意到选项卡的

canActivate: [MsalGuard]

（即最后一个）并不是很有用，因为每个子放置的子项也有它。然后，它触动了我：有没有办法指定

canActivate

和

canDeactivate

，以便它实际上影响各个子路径？

类似于下面的内容（我自然地进行了测试并发现它不会做我想要的事情）。

...
{
  path: ":itemId", component: TabsComponent, children: [
    { path: "a", component: ComponentA },
    { path: "b", component: ComponentB },
    { path: "c", component: ComponentC },
    ...
    ], canActivate: [MsalGuard], canDeactivate: guard
  ...
}

Answer 1

我认为守卫设计为仅适用于当前路线，不适用于子路线。

如果有帮助的话，您可以创建一个可重用的函数来减少代码。

export const getGuards() {
  return { canActivate: [MsalGuard], canDeactivate: guard };
}

export const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "profile", component: ProfileComponent },
  {
    path: ":itemId", component: TabsComponent, children: [
      { path: "a", component: ComponentA, ...this.getGuards() 
      { path: "b", component: ComponentB, ...this.getGuards() },
      { path: "c", component: ComponentC, ...this.getGuards() },
      ...
    ]
  },
  ...
  { path: "**", component: BoomComponent },
];