based - angular-permission example

How would you manage user roles and permissions using Angular 2 (2)

As mentioned in the comments to your question, a complete answer is beyond the scope of a SO question/answer, and so you may find your question closed in the near future for that reason, but here's some quick suggestions for you to explore further on your own:

  • Get the user's permissions from the server during/after login via http/https. Store these permissions somewhere that makes sense for your app, perhaps in a service. If you're using JWT, the permissions can be returned in the JWT token.

  • To simplify things, only deal with permissions on the client. Roles are for the server code to figure out what permissions the user has. No need to muck things up by conflating roles with permissions on the client.

  • Protect routes with auth guards

  • Protect individual UI elements with *ngIf or ngSwitch/*ngSwitchCase

  • Dynamic Loading is a big topic area - go read about it - lots of resources on the web. However, as far as I know, while you can lazily load modules, they must be known to the application at compile-time. I may be mistaken, but I don't think that you can just load anything you want at runtime.

I'm working on a new Angular2 app, and I was wondering how would you manage routes accessible to certain roles, and permissions to create, edit, and delete items for certain roles.

I want to know how do you solving the problem such this:

  • How you manage access to some UI elements? How app know the show or hide it? Do you use single service for this? Or you create different conditions for the different place in your app?

  • How you manage your routing? Do you use CanActivate, CanActivateChild, CanLoad and etc? Do you build a single guard service for all routes or make different services for different modules or component?

  • And last question. Best way to divide the app then you can sell it like a CMS. I mean how we can realize possibility to load some other modules from the market for example, and add it in your app.

How are you solve the similar problem?

Any guidance, experience, or pointers to material covering these topics is greatly appreciated. Thanks in advance.

So I had to implement something like this on an application I worked out, this is how I handled it.

I created a auth service, this contained a method that checked is the user had a management role:


public isManager(): boolean {
    let isManager = false;
    let user = this.getUserToken();
    //Stored my allowed groups in a config file, comma separated string
    let allowedGroups = AuthenticationParams.filters.split(',');
    let userGroups: any;
    if (user !== null && user !== undefined) {
      try {
        let userGroups: any = user.role;
        if (userGroups !== undefined && userGroups !== null && userGroups.length > 0) {
          try {
            userGroups.forEach((e: any) => {
              if (allowedGroups.indexOf(e) > -1) {
                isManager = true;
          } catch (e) {
            if (allowedGroups.indexOf(userGroups) > -1) {
              isManager = true;
      } catch (e) {
        isManager = false;
    return isManager;

public getUserToken(): any {
    return localStorage.getItem('jwtTokenName');

I created an auth guard as follows:


import { Injectable, OnInit } from '@angular/core';
import { CanActivate, CanActivateChild } from '@angular/router';
import { Router } from '@angular/router'; 
import { AuthenticationService } from '../services/helper/security/auth.service';

export class GuardComponent implements CanActivate {

  constructor(private authenticationService: AuthenticationService, private _router: Router) {

  canActivate() {
    let isManager: boolean = this.authenticationService.isManager();
    if (!isManager) {
    return isManager;


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GuardComponent } from './guard.component';

  declarations: [],
  imports: [ CommonModule ],
  exports: [],
  providers: [ GuardComponent ],
export class GuardModule { }

I then used the guard for my route that handles navigation to the admin section


{ path: 'management', component: AdminComponent, canActivate: [GuardComponent] }

On my navigation bar I just call the isManager method and stored that on a variable and use that to determine whether or not the management link needs to be displayed or not.


public isManager: boolean = false;

ngOnInit(): void {
    this.isManager = this.authenticationService.isManager();


<li [routerLinkActive]="['active']" *ngIf="isManager"><a [routerLink]="['management']">Management Portal</a></li>

I've had to remove some data from each method, but this will give you the basic idea. Hopefully this helps.