angular - 如何根据角色启用组件/操作？

Question

我目前正在使用 Angular 4 为一个项目制作一个前端应用程序，从后端我得到了一些使用 POST 调用的操作，这些操作是相同的:

actions.response.ts

export class actions{
          AGREEMENTS_VIEW :string;
          PROSPECTS_VIEW :string;
          AGREEMENTS_INSERT_UPDATE :string;
          PRODUCTS_INSERT_UPDATE :string;
          PROSPECTS_INSERT_UPDATE :string;
          DOCUMENTS_VIEW :string;
          DOCUMENTS_INSERT_UPDATE :string;
}

现在，我想做的是:

根据每个操作(agreements_view、prospects_view..等)，我想启用或禁用某个组件或某些输入/选择/按钮... 我怎样才能做到这一点？

http post:

securityActions(): Observable<actions> {
    return this.http.post<actions>(
        `${this.ENDPOINT}/security-actions`,
        null,
    );
}

How i called the post inside the component:

  securityActions() {
    this.securityService.securityActions().subscribe(
      (res: actions) => {
        this.actionsSecurity = res;
        console.log(res);

      },
      errors => {
        Utils.notifyErrors(errors, this.notificationsService);
      });
  }

抱歉，如果我的问题听起来很愚蠢，但我是 Angular 新手，我有点迷失了!

Answer 1

在我当前的项目中，我们创建了一个权限指令。您给它一些条件，当不匹配时它会从 View 中删除标签。

这是一个示例:

export class HasPermissionDirective implements OnInit, OnDestroy {
  private permissionSub: Subscription;

  constructor(private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef,
              private authorizationService: AuthorizationService) {
  }

  ngOnInit(): void {
    this.applyPermission();
  }

  @Input()
  set hasPermission(checkedPermissions: Permission[]) {
    // The input where we set the values of our directive
  }

  private applyPermission(): void {
    this.permissionSub = this.authorizationService.checkPermission(/* our permissions to check for authorization*/)
      .subscribe(authorized => {
        if (authorized) {
          this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          this.viewContainer.clear();
        }
      });
  }

  ngOnDestroy(): void {
    this.permissionSub.unsubscribe();
  }
}