Как реализовать ACL / авторизацию на основе ролей с angular 2?

Question

Каков наилучший способ реализации ACL / на основе бумаги с Angular 2?

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

Мне нужно запретить пользователю доступ к конкретному ресурсу, на который у него нет прав доступа. Для этого я подумал об использовании понятия "Страж англов". С CanActivate Guard я мог установить, пропустить или нет пользователя, основываясь на информации, которую я поместил бы в каждый маршрут. Эта информация будет именем ресурса, к которому относится этот маршрут. Когда я добрался до охранника, я мог сравнить с его ролью и посмотреть, есть ли у его роли доступ к этой функции и разрешена ли навигация.

Но при этом может возникнуть еще две проблемы:

1 - Как перенаправить пользователя на ресурс, к которому он имеет доступ? Должен ли я перечислить файлы маршрута и найти кого-то, кто совместим с его ролью, а затем перенаправить туда?

2 - Как отключить компоненты, которые он не видит на страницах, к которым он имеет доступ? Например, у него есть доступ к странице списка X, но у него нет доступа для создания нового элемента, поэтому мне нужно удалить кнопку "Создать что-то". Или, скорее, как это сделать с элементами div, которые содержат конкретную информацию для некоторых ролей, но не для ее роли?

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

Спасибо за внимание.

Answer 1

Вы можете попробовать использовать библиотеку ngx-permissions для этого. Он поддерживает синтаксис, отложенную загрузку, изолированную отложенную загрузку. Добавьте библиотеку в проект:

@NgModule({

 imports: [
    NgxPermissionsModule.forRoot()
 ] 
 })
 export class AppModule { }

Загрузить роли

NgxRolesService
 .addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB'])

 NgxRolesService.addRole('Guest', () => {
  return this.sessionService.checkSession().toPromise();
 }); 

 NgxRolesService.addRole('Guest', () => {
     return true;
 }); 

использовать в шаблонах

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
  <div>You can see this text congrats</div>
</div>

защитить свою охрану

const appRoutes: Routes = [
 { path: 'home',
component: HomeComponent,
canActivate: [NgxPermissionsGuard],
data: {
  permissions: {
    only: ['ADMIN', 'MODERATOR'],
    except: ['GUEST']
   }
  }
 },
];

Для получения подробной документации проверьте страницу вики.

Answer 2

Проверьте CASL, есть статьи об интеграции в Vue и Aurelia, но для Angular 2+ реализация должна быть очень похожа

Основная идея, что вы можете определить способности для каждого пользователя

import { AbilityBuilder } from 'casl'


// allow to read and create Todo-s for everybody and update for assignees
export default AbilityBuilder.define(can => {
  can(['read','create'], 'Todo')
  can(['update'], 'Todo', { assignee: user.id })
})

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