MireaFrontend/src/directives/has-role.directive.ts

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
import AuthApiService from "@api/v1/authApiService";
import {AuthRoles} from "@model/AuthRoles";
import {catchError, of} from "rxjs";

@Directive({
  selector: '[appHasRole]',
  standalone: true,
  providers: [AuthApiService]
})
export class HasRoleDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private authService: AuthApiService
  ) {}

  @Input() set appHasRole(role: AuthRoles) {
    this.viewContainer.clear();

    this.authService
      .getRole()
      .pipe(catchError(_ => {
        this.viewContainer.clear();
        return of(null);
      }))
      .subscribe(data => {
        if (data === role)
          this.viewContainer.createEmbeddedView(this.templateRef);
        else
          this.viewContainer.clear();
    })
  }
}