Angular 5 JWT где хранить роли пользователя? Каким образом проверять?

Question

[Павел Талайко]

Необходимо разграничить доступ к представлению (кнопка админ панель). Так чтобы роли не хранить в localStorage как во многих туториалах.

Answer 1

[Ivan Stroykin]

Есть несколько вариантов. Но какой бы способ вы не использовали, всё что на фронте, может передать под себя, и открыть те же недоступные кнопки, которые не подходят под роль. Поэтому всегда нужно делать проверку на бэке

Из вариантов, это хранение в куках, глобально в сервисе, в нужных местах делать запрос на back и получать разрешение или запрет. Самое главное еще не передавать никогда список ролей. Никто не должен знать какие роли существуют.

Можно написать директиву, вроде:

Директива по отображению элементов в интерфейсе в зависимости от роли

@Directive({ selector: '[hasRole]' })
export class HasRoleDirective implements OnInit {
  @Input() hasRole: string[] | string | undefined;

  constructor(private _viewContainer: ViewContainerRef,
              private _template: TemplateRef<any>) {
  }

  ngOnInit(): void {
    this._checkRoles(GlobalService.userRole);
  }

  private _checkRoles(userRole: string): void {
    if (!this.hasRole || this.hasRole === 'undefined' || this.hasRole.indexOf(userRole) !== -1) {
      this._viewContainer.createEmbeddedView(this._template);
    } else {
      this._viewContainer.clear();
    }
  }
}

Можете переписать данную директиву под себя. То есть при открытии страницы делать запрос на backend получать разрешение/запрет на просмотр элементов и с помощью этой директивы, расставленной на определенные элементы, контролировать отображение

Answer 2

[Даша Циклаури]

храни в сторе (ngrx-store), при старте приложения у тебя читается JWT токен и: в самом токене список ролей или делаешь запрос и потом всё это пушишь в стор