如何根据角色启用 components/actions？

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.. 等）我想启用或禁用一个组件或某些 input/select/button... 我怎样才能做到这一点？

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

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

这是一个示例：

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

Answer 2

据我了解，您想根据某些规则激活或停用对组件或按钮的访问。例如，用户是否登录或您的表单是否已正确验证。如果你想停用一个按钮，你可以在这里使用这个指令 [disabled]:

 <button class="btn btn-lg btn-primary btn-block" type="submit"[disabled] ="!registerForm.valid">
    Submit
  </button>

例如，如果您的表单无效，您将无法提交数据。

对于组件，您可以在路线上执行此操作。您首先需要创建一个实现 CanActivate 接口的服务。例如，对于身份验证，您可以这样做：

canActivate(): Observable<boolean> {
    return Observable.from(this.user)
      .take(1)
      .map(state => !!state)
      .do(authenticated => {
    if
      (!authenticated) {
        this.router.navigate([ '/login' ]);
      }
    });

最后在您的路由文件中添加规则。例如，只有经过身份验证才能访问仪表板。

{path: 'dashboard', component: DashboardComponent, canActivate: [the serviceYouDid]}

我希望这个例子可以帮助 you.And 如果您需要任何东西或者不是您要找的东西，请告诉我。

如何根据角色启用 components/actions？

How can I enable components/actions based on role?

post

roles

typescript

angular