Неожиданное поведение при маршрутизации дочерним элементам с бескомпонентным маршрутом в Angular 5

У меня есть вопрос о маршрутизации Angular 5.

Если я объявлю маршруты, подобные этому ниже, route guard вызывается каждый раз, когда я направляюсь к одному из компонентов через routerLink в html.

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

Почему защита маршрута в моем сценарии с бескомпонентным родительским маршрутом не вызывается каждый раз при маршруте к компоненту?


angular angular-routerlink angular-router angular5 angular-route-guards
person ochs.tobi    schedule 16.05.2018    source источник
comment
не имеет смысла? Вы добавили Route Guard для родительского маршрута. Как только Parent активирован, теперь вы находитесь в дочернем маршруте. Итак, почему AuthGuard будет вызываться?   -  person Ritwick Dey    schedule 16.05.2018
comment
Это имеет смысл. Но если я вернусь к родительскому маршруту, AuthGuard также больше не вызывается. Почему это? Это потому, что нет другого маршрута на том же уровне, что и родительский маршрут?   -  person ochs.tobi    schedule 16.05.2018

Ответы (2)


arrow_upward
1
arrow_downward

Угадайте, что ваш охранник должен реализовать интерфейс CanActivateChild.

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

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

arrow_upward
1
arrow_downward

Вот как это должно работать.

Допустим, у вас есть раздел администратора, который вы хотите защитить:

{
    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

person CornelC    schedule 16.05.2018