Перенаправление проверки подлинности не работает на дочерних маршрутах

Question

Я новичок в angular, я создаю приложение и управляю своим сервисом входа в систему следующим образом:

export class AfterLoginService implements CanActivate {

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean>
{
    if (!this._tokenService.loggedIn())
        this.router.navigate(['login']);

    return this._tokenService.loggedIn();
}

, и мои маршруты такие:

import {BeforeLoginService} from './services/before-login.service';
import {AfterLoginService} from './services/after-login.service';

export const routes: Routes = [
{
 path: '',
 redirectTo: 'dashboard',
 pathMatch: 'full',
 canActivate:[AfterLoginService]
},
{
 path: 'login',
 component: LoginComponent,
 canActivate:[BeforeLoginService]
},
{
 path: '',
 component: DefaultLayoutComponent,
 canActivate:[AfterLoginService],
 data: {
  title: 'Home'
 },
 children: [
  {
    path: 'users',
    loadChildren: () => import('./views/users/users.module').then(m => m.UsersModule)
   },
   {
     path: 'buttons',
     loadChildren: () => import('./views/buttons/buttons.module').then(m => m.ButtonsModule)
    }
    // others child routes
   ]
  },
  { path: '**', component: P404Component }
];

Теперь, если Я пытаюсь получить доступ к защищенному пути (например, / button) без входа в систему, он перенаправляет меня на вход в систему, но если я добавлю что-то еще, например "/ buttons / any", будет показано следующее:

, когда я пытаюсь получить доступ к дочернему маршруту без регистрации Я не перенаправлен промежуточным ПО, дочерние маршруты выглядят так:

import { ButtonsComponent } from './buttons.component';
import { DropdownsComponent } from './dropdowns.component';
import { BrandButtonsComponent } from './brand-buttons.component';

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Buttons'
    },
    children: [
      {
        path: '',
        redirectTo: 'buttons'
      },
      {
        path: 'buttons',
        component: ButtonsComponent,
        data: {
          title: 'Buttons'
        }
      },
      {
        path: 'dropdowns',
        component: DropdownsComponent,
        data: {
          title: 'Dropdowns'
        }
      },
      {
        path: 'brand-buttons',
        component: BrandButtonsComponent,
        data: {
          title: 'Brand buttons'
        }
      }
    ]
  }
];

предполагаются дочерние маршруты следовать промежуточному программному обеспечению и перенаправить меня на страницу входа, но я не знаю, чего мне не хватает, так же как если я пытаюсь получить доступ к какому-либо несуществующему маршруту (/ bad_path / any), он показывает то же самое и не перенаправляет меня на страницу 404, как указано с подстановочным путем, что мне не хватает?

Answer 1

для детей вы должны использовать CanActivateChild , попробуйте это:

{
 path: '',
 component: DefaultLayoutComponent,
 CanActivateChild:[AfterLoginService],
 data: {
  title: 'Home'
 },
 children: [
  {
    path: 'users',
    loadChildren: () => import('./views/users/users.module').then(m => m.UsersModule)
   },
   {
     path: 'buttons',
     loadChildren: () => import('./views/buttons/buttons.module').then(m => m.ButtonsModule)
    }
    // others child routes
   ]
  },

Определение на angular .io для caActivateChild

Интерфейс, который класс может реализовать, чтобы быть охранником, решающим, может ли быть активирован дочерний маршрут. Если все охранники вернут истину, навигация продолжится. Если какой-либо охранник вернет false, навигация будет отменена. Если какой-либо охранник возвращает UrlTree, текущая навигация будет отменена, и новая навигация будет запущена для UrlTree, возвращенного охранником.