主页 / coding / 问题 / 79222478
Accepted
Konrad Viltersten
Asked: 2024-11-25 17:55:24 +0800 CST

如何消除 Angular 中 canActivate/canDeactivate 的详细模式？

  • 772

我的路由设置如下（主父节点和一堆子子节点）。

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
  ...
}

1 个回答

  1. Best Answer

    来自MSAL Guard - Github 文档MsalGuard支持和CanActivateChild。canLoad因此您可以尝试使用CanActivateChildguard 而不是canActivate。

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

相关问题