О маленькой полезной фиче angular

Недавно появилась задача в одном достаточно крупном проекте ограничивать UI и функционал пользователей, в зависимости от их ролей. К этому моменту приложение уже разрослось на 100+ компонент, и это при том что основные базовые компоненты вынесены в отдельную репу и ставятся пакетом. То есть примерно в каждом из 100+, вероятно придется вносить некоторые правки, связанные с правами доступа.

Первой мыслью было пройтись по всем компонентам, заинжектить через DI UserService, прокинуть в шаблон контекст пользователя, и там с этим как-то разбираться. Однако, на счастье, я не успел этим заняться, так как нашел другое, как мне кажется более удачное решение.

exportAs

Я подумал о том, как можно сразу в шаблонах получить userContext, без необходимости инжектировать сервис или токен с пользователем в контроллерах компонент. На счастье вспомнилась весьма удобная штучка: свойство директив (ну и компонент, как наследников, естественно) - exportAs.

Что же дает exportAs?

Вот что нам сообщает документация:

exportAs: Определяет имя, которое может быть использовано в шаблоне для назначения этой директивы переменной.

Как же этим воспользоваться?

Допустим, у нас есть сервис, который авторизовался и хранит данные о пользователе.

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private user$: User;

  set user(user: User) {
    this.user$ = user;
  }

  get user() {
    return this.user$;
  }

  constructor(
    private _http: HttpClientWrapperService
  ) {
  }
  
  ...
}

И есть класс, описывающий пользователя

export class User {
  id: number;
  name: string;
  claims: Claim[];

  get roles() {
    return this.claims?.map(_ => _.code);
  }

  get isAdmin() {
    return this.roles?.indexOf('ADMIN') >= 0;
  }

  get isUser() {
    return this.isAdmin || this.roles?.indexOf('USER') >= 0;
  }

  get isGuest() {
    return this.isAdmin || this.isUser || this.roles?.indexOf('GUEST') >= 0;
  }
  ...
}

Что нам нужно - создать директиву, которая будет иметь доступ к пользователю, например такую:

import {Directive} from '@angular/core';
import {UserService} from '../../service/user.service';

@Directive({
  selector: '[appUserContext]',
  exportAs: 'userContext'
})
export class UserContextDirective {
  get user() {
    return this._user?.user;
  }

  constructor(private _user: UserService) {
  }
}

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

<div class="column content-block" appUserContext #user="userContext">
	<app-toolbar>
		<ng-container *ngIf="user.user?.isAdmin">
			<button app-button (click)="add()">
				<app-icon [name]="'add'"></teta-icon>
			</button>
			<button app-button (click)="delete()">
				<teta-icon [name]="'delete'"></teta-icon>
			</button>
		</ng-container>
	</app-toolbar>
</div>

Также данная функция может использована для получения доступа к директивам и компонентам в шаблоне, без необходимости использовать ViewChild там, где для этого нет большой необходимости.

Спасибо за внимание, надеюсь эта информация окажется для вас полезной и сэкономит кому-то время.