Question

我目前正在为使用Angle 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，prespects_view等），我要启用或禁用组件或某些输入/选择/按钮... 我怎样才能做到这一点？

http帖子：

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

我如何在组件内部调用帖子：

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

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

对不起，如果我的问题听起来很愚蠢，但我对角度有些陌生，有点迷失！

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

我希望这个例子能对您有所帮助。让我知道您是否需要什么？

如何根据角色启用组件/动作？

2 个答案: