如何根据角色启用组件/动作? [英] How can I enable components/actions based on role?

问题描述

我目前正在为使用Angle 4的项目制作一个前端应用程序，从后端我可以通过POST调用一些相同的操作:

I'm currently making a frontend app for a project using angular 4, from the backend I get some actions called with a POST that are the same:

actions.response.ts

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，prespects_view等)，我想要启用或禁用组件或某些输入/选择/按钮... 我怎样才能做到这一点?

Based on each actions (agreements_view, prospects_view.. etc) i want to enable or disable a component or some input/select/button... How can I do that?

http帖子:

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);
      });
  }

对不起，如果我的问题听起来很愚蠢，但我对棱角不熟悉，有点迷失了！

Sorry if my question sounds stupid but im new to angular and im kinda lost!

推荐答案

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

In my current project we created a permission directive. You give it some conditions and it deletes the tags from the view when it doesn't match.

以下是其中的一个示例:

Here is a sample of it :

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();
  }
}

这篇关于如何根据角色启用组件/动作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！