В 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.