在 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，您的守卫就会被召唤。一旦您进入管理部分，children 将不会触发此守卫。

如果你想保护child路由，那么你不需要使用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 and CanActivateChild

您可以在文档中找到更多信息：Route guards

在 Angular 5 中使用无组件路由路由到子级时出现意外行为

Unexpected behavior when routing to children with componentless route in Angular 5

angular

angular-router

angular-route-guards

angular5

angular-routerlink