How can I enable components/actions based on role?

Question

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

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

Now, what I want to do:

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 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!

Answer 1

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

Answer 2

For what i understand you want to activate or deactivate access to a component or button regarding some rules. For example if the user is logged in or not or if your form is properly validated. If you want to deactivate a button you can use this directive here [disabled]:

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

for example if your form is not valid you cant submit the data.

For components you can do this on routes. You need first to make a service that implements the CanActivate interface. And for example for authetication you could do like this:

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

And finally on your routes files just add the rule there. For example to have access to dashboard only if is authenticated.

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

I hope this example can help you.And let me know if you need anything or its not this your looking for.