0

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

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

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

为什么每次路由到组件时都不会调用无组件父路由的场景中的路由保护？

4

2 回答 2

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}
    ]}
]
于 2018-05-16T09:19:39.157 回答
1

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

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

{
    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

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

于 2018-05-16T09:33:32.517 回答