Angular 5 Role based Route activation

Question

I know I can use Role / auth based routing and I can activate and deactivate it at the routing module. I also want to hide the options Guard based. I have an [AuthGuard] and a [RoleGuard] both implement canLoad(), canActivate() etc and is assigned to the corresponding property at the routing. Now I was wondering if i can do the same with the links which are nav option I made as an array

 options: MenuItem[] = [
      {
          page: "Active Devices",
          icon: "tablet",
          path: "device-status",
          canLoad:[AuthGuard]
      }, {
          page: "Data Sync",
          icon: "refresh",
          path: "data-sync", 
          canLoad: [AuthGuard]
      }, {
          page: "Add Users",
          icon: "user",
          path: "add-users",
          canLoad: [AuthGuard]
      }, {
          page: "Change Password",
          icon: "key",
          path: "change-password",
          canLoad: [AuthGuard]
      }]

I was wondering how to make the canLoad() function in AuthGuard get value assigned to canLoad() of this array.

Answer 1

I had a similar problem and ended up writing custom pipe which takes an array of roles as an input and checks whether they match the ones I store in localStorage and returns true or false.

So your menu item will look like this:

{
    page: "Active Devices",
    icon: "tablet",
    path: "device-status",
    roles: ['Role 1', 'Role 2']
}

Then in your templates, you can do something like this *ngIf="menuitem.roles | checkAccess" where checkAccess is the name of your pipe which does all the checks.

The advantage of this approach is that you can re-use checkAccess pipe in any part of your application should you need to hide anything else apart from navigation items.