Question

我对Angular 5路由有疑问。

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

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

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

在Angular 5

2 个答案: