Как я могу разрешить маршруты для пользователей в зависимости от состояния модуля?

Я знаю, как использовать Auth Guard в Angular, и я только новичок в angular. Я только что сделал базовую аутентификацию на основе доступа для чтения и записи, которая включает такие роли, как isAdmin или Isguest.

Но теперь я хочу, чтобы этот конкретный пользователь имел доступ только к некоторым маршрутам.

Вроде у меня три модуля

  1. Компонент
  2. компонент В
  3. Компонент С

И все вышеперечисленные компоненты могут быть дочерними или не быть дочерними маршрутами.

Я хочу, чтобы этот пользователь harry мог получить доступ к модулю A и B.

Джексон может получить доступ к модулям B и C.

Мишель может получить доступ только к модулю А

Итак, как спроектировать такой тип механизма в Angular?

На самом деле я знаю Auth Guard, но как я могу организовать данные, например, в базе данных, чтобы добавить список компонентов или что-то еще и т. д. и т. д.?

Какие условия мне нужно добавить в canActivate?

Решение, с помощью которого мне нужно меньше обрабатывать и быть динамичным, если завтра появится новый компонент, и мне нужно получить доступ к грантам.

Приветствуются любые отличные идеи...!!


person kushal Baldev    schedule 31.07.2020    source источник
comment
angular.io/api/router/CanActivate   -  person enno.void    schedule 31.07.2020
comment
Привет @ enno.void, я ищу, например, как организовать данные в базе данных, может быть, мне нужно добавить список компонентов, к которым пользователь может получить доступ, какое должно быть условие внутри canActivate? Я ищу надежное решение, как будто завтра, если придет какой-либо другой компонент, мне нужно будет меньше обрабатывать для предоставления доступа :)   -  person kushal Baldev    schedule 31.07.2020


Ответы (2)


Вы можете добавить разрешение для каждого маршрута и сохранить разрешения, необходимые для каждого пользователя.

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
    canActivate: [ Guard ],
    data: { permission: 'view dashboard' }
  }

и внутри canActivate() вы можете проверить, присутствует ли разрешение в пользовательских данных.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if(!route.data || (route.data && this.user.permissions.find(route.data.permission))) {
    return true;
  }
}

person Vna    schedule 31.07.2020
comment
Спасибо за ответ, так что вы хотите сказать, что в маршрутах мне просто нужно добавить такие данные свойства разрешения: {разрешение: 'просмотр панели инструментов'} и сказать, что в пользовательском классе или интерфейсе мне просто нужно основной список разрешений, например, если список разрешений содержит «просмотр панели инструментов». Я имею в виду, что список имеет строковый тип, тогда ему разрешен доступ, правильно ли я понял ...? - person kushal Baldev; 31.07.2020
comment
Хорошо, спасибо, это кажется наиболее многообещающим, постараемся сообщить вам, но что мы можем сделать для дочерних маршрутов? И, кстати, я использую угловую версию 10, поэтому вы также можете предложить мне, есть ли какие-либо изменения синтаксиса, прежде чем я попробую ваше решение :) - person kushal Baldev; 31.07.2020
comment
Для дочерних маршрутов вы также можете справиться с этим таким же образом. Я пробовал это в версии 8, но должно работать и для 10. - person Vna; 03.08.2020
comment
Конечно, этот ответ кажется наиболее многообещающим, потому что знаю, что я одобрю его, поскольку я не думаю, что какой-либо другой способ будет эффективнее этого :) спасибо .. !! - person kushal Baldev; 04.08.2020

Вам нужно будет создать Auth Guard, который будет выглядеть следующим образом:

@Injectable()
    export class MyGuard implements CanActivate {
      constructor(private _myUserService: MyUserService) {}
    
      canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if(//ADD CONDITION HERE)
            return true;
        return false;
      }
    }

и тогда в ваших маршрутах у вас будет что-то вроде:

{
    path: 'XXX',
    component: XXXComponent,
    canActivate: [MyGuard],
}
person Yhlas    schedule 31.07.2020
comment
Я это знаю, но как я могу организовать состояние, например, в базе данных, мне нужно поместить такие поля, как пользовательский документ, и поля, такие как доступ к модулю ABC, что-то вроде этого. Я ищу точные ответы и точные условия, если вы можете поставить некоторые больше усилий в этом было бы здорово..!! - person kushal Baldev; 31.07.2020