В Angular 6 есть функция защиты доступа к маршрутизатору, называемая защитником маршрутизатора. Например, у вас есть структура маршрутизатора:

{
  path: 'admin',
  component: AdminComponent,
  canActivate: [AuthGuardService],
  children : [
    {
      path: 'books', component: ...,
    },
    {
      path: 'authors', component: ...,
    },
    {
      path: 'payments',
      canActivateChild: [AuthGuardService],
      children: [
        {
          path: 'list', component: ...
        },
        {
          path: 'list/:id', component: ...
        }
      ]
    }
  ]
}

если вы хотите получить доступ к /admin, вы должны пройти службу AuthGuardService, вы останетесь на текущей странице, если не пройдете AuthGuardService .

И в настройке маршрутизации есть 5 основных команд.

  • CanActivate
  • CanActivateChild
  • CanDeactivate
  • CanLoad
  • Resolve

Здесь мы обсуждаем только CanActivate и CanActivateChild.

На мой взгляд, CanActivate используется для ограничения доступа с определенного пути и всех подпутей. Например, если вы поместите CanActivate в /admin, то маршрутизатор, такой как /admin/*, будет защищен.

И CanActivateChild используется для ограничения доступа к определенной группе внутри пути CanActivate. Итак, это означает, что CanActivateChild используется внутри CanActivate,, что означает, что если вы хотите использовать CanActivateChild,, вы должны сначала использовать CanActivate,.

{
  path: 'admin',
  component: AdminComponent,
  canActivate: [AuthGuardService],
  children : [
    {
      path: 'books', component: ...,
    },
    {
      path: 'authors', component: ...,
    },
    {
      path: 'payments',
      canActivateChild: [AuthGuardService],
      children: [
        {
          path: 'list', component: ...
        },
        {
          path: 'list/:id', component: ...
        }
      ]
    }
  ]
}

Как и в приведенном выше примере, пользователь сначала входит в систему, чтобы пройти canActivate: [AuthGuardService].. Теперь он может получить доступ к страницам книг и авторов, но если он хочет получить доступ к странице оплаты, ему нужен еще один Guardian, потому что страница оплаты находится в Guardian, поэтому использовать canActivateChild.

Поскольку вам нужны два типа проверки, у вас не может быть двух методов canActivate, поэтому вам нужен canActivateChild для проверки разрешения внутри пути canActivate. Очевидно, что вы можете создать другой сторожевой сервис (AuthGuardForChildrenRoutes) и по-прежнему использовать метод canActivate, но суть не в этом.

Хорошо, давайте начнем:

Во-первых, создайте ваш опекун service.ts

важно это и поместить в провайдеров в app.module.ts

Во-вторых, определитесь, какую страницу вы хотите защитить.

Я использую canActive для защиты студенческого сервиса и его подмаршрутизатора.

В-третьих, измените файл guard.ts.

Здесь, если объект selectStudent существует, studentGuard вернет true, чтобы вы могли получить доступ к странице студенческой службы, в противном случае он вернет false.