在 Angular 5 中路由到具有无组件路由的子级时出现意外行为

Question

我有一个关于 Angular 5 路由的问题。

如果我在下面声明这样的路由，则每次通过 html 中的routerLink路由到其中一个组件时都会调用route guard。

const routes: Route[] = [ 
{ path: 'comp1', component: Comp1Component, canActivate: [AuthGuard]},
{ path: 'comp2', component: Comp2Component, canActivate: [AuthGuard]},
{ path: '', component: HomeComponent, canActivate: [AuthGuard]},
]

但是，如果我使用componentless路由声明它，则仅在应用程序启动时调用守卫。当我在 html 中切换路由时，再也不会调用守卫。

const routes: Route[] = [
{ path: '', canActivate: [AuthGuard], children: [
{ path: 'comp1', component: Comp1Component},
{ path: 'comp2', component: Comp2Component}
]}

为什么在我的方案中，每次路由到组件时都不会调用无组件父路由的路由防护？

Answer 1

猜你的守卫必须实现CanActivateChild接口。

https://angular.io/api/router/CanActivateChild

const routes: Route[] = [
{ path: '', canActivate: [AuthGuard], canActivateChild: [AuthGuard], children: [
{ path: 'comp1', component: Comp1Component},
{ path: 'comp2', component: Comp2Component}
]}
]

Answer 2

这就是它应该的工作方式。

假设您有一个要保护的管理部分：

{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [..]
}

一旦你试图去/admin你的警卫就会被召唤。进入管理部分后，孩子们将不会触发此防护装置。

如果你想保护子路由，那么你需要使用CanActivateChild

const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'comp1', component: Comp1Component},
{ path: 'comp2', component: Comp2Component}
]
}
]
}
];

AuthGuard 应该同时实现 CanActivate 和 CanActivateChild

您可以在文档中找到更多信息：路由防护