Скрыть части меню в Angular (разрешение) - PullRequest
Новая
       36

Скрыть части меню в Angular (разрешение)

0 голосов
/ 12 июня 2019

Я создаю Dashboard, используя Angular. Пользователи информационной панели: 1: администратор (которому разрешено видеть полное меню на боковой панели) и 2: сотрудник (которому разрешено видеть только часть этого меню на боковой панели).

Как определить пункты меню, чтобы они могли отображаться динамически на основе определенных пользовательских разрешений?

Спасибо

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Вот фрагмент моего ролевого стража: 

public canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<boolean> {
    const roles: UserRoles[] = route.data['roles'];
    return this.authenticationService.currentPrincipal.pipe(take(1), map((user) => {
        // console.log(roles);
        return roles.every((val) => user.roles.includes(val));
    }));
}

Итак, вы можете видеть, что моя аутентификация пользователя получает и устанавливает роли currentUser.

Когда пользователь создается, егоPrinciple роли устанавливаются в зависимости от типа пользователя.(они могут быть обновлены администратором)

Дайте мне знать, если вам нужно больше.

0 голосов
/ 12 июня 2019 
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
import { PermissionService } from '../services/web-api/permission.service';

@Directive({
  selector: '[appAuthorizeAction]'
})
export class AuthorizeActionDirective implements OnChanges {
  @Input('path') path: string;
  @Input('permission') permission: string;

  constructor(private el: ElementRef, private permissionService: PermissionService) {
  }

  ngOnChanges() {
    const authResult = this.permissionService.isAuthorized(this.path, this.permission);
    if (authResult !== true) {
      this.el.nativeElement.remove();
    }
  }
}

Вы можете использовать следующее и реализовать на любом элементе: Пример использования: 

<button mat-button appAuthorizeAction [path]="'ADMIN_PANEL'" [permission]="'EXECUTE'">Click me!</button>

В случае, если пользователь авторизован для выполнения действия execute, он будет удерживать кнопку, иначе он будетудали это.

...