Есть несколько вариантов. Но какой бы способ вы не использовали, всё что на фронте, может передать под себя, и открыть те же недоступные кнопки, которые не подходят под роль. Поэтому всегда нужно делать проверку на бэке
Из вариантов, это хранение в куках, глобально в сервисе, в нужных местах делать запрос на 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 получать разрешение/запрет на просмотр элементов и с помощью этой директивы, расставленной на определенные элементы, контролировать отображение
