Инструменты ролей и разрешений для приложений Angular - PullRequest
Новая
       5

Инструменты ролей и разрешений для приложений Angular

0 голосов
/ 08 января 2020

Мы создаем angular приложение, в котором мы вызываем наш бэкэнд REST API для аутентификации пользователя. этот API REST использует аутентификацию windows для аутентификации пользователя.

Теперь мы хотели бы реализовать роли и разрешения для нашего приложения angular. Наше требование следующее:

  1. Пользователи с доступом только для чтения должны иметь возможность читать только определенные страницы в нашем приложении.
  2. Пользователи с доступом для записи должны иметь возможность изменять данные в конкретная страница.

Кто-нибудь может подсказать, как этого добиться?

Может быть, использовать какой-то инструмент с открытым исходным кодом?

С уважением, Vipul

Ответы [ 2 ]

0 голосов
/ 08 января 2020

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

Guard полезен, если вы хотите запретить доступ к странице для своего рода пользователь. Согласно вашему сообщению, все пользователи смогут получить доступ к странице. Однако не все смогут редактировать страницу.

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

Вот как это работает: 

@Injectable({ providedIn: 'root' })

export class MeResolver implements Resolve<any> {
  constructor(private http: HttpClient) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    // This should return user data (take care of sending token too)
    return this.http.get<any>(`${environment.api}/auth`)
  }
}

В вашем файле маршрутизации вы должны иметь право: 

{
    path: '',
    component: UserComponent,
    resolve: [ MeResolver ],
}

Затем в вашем компоненте вы можете получить доступ к resolver с помощью свойства route, например: 

export class UserComponent {

  $me: Observable<any> = this.route.data.pipe(map(elem => elem[0]));

  constructor(private route: ActivatedRoute) { }

}

С этим вы можете скрыть кнопку «Редактировать» в вашем HTML: 

<button (click)="edit()" *ngIf="(me$ | async)?.role.admin">EDIT</button>
0 голосов
/ 08 января 2020

Angular имеет встроенный механизм, называемый guard , для достижения этого - мы используем это для проверки прав доступа пользователя с сервера Keycloak. Например, есть CanActivate охранник, с которым вы можете ознакомиться с документацией здесь . 

const adminRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        children: [
          { path: 'crises', component: ManageCrisesComponent },
          { path: 'heroes', component: ManageHeroesComponent },
          { path: '', component: AdminDashboardComponent }
        ],
      }
    ]
  }
];
...