Common use cases

Common use cases

Overview

1. Two guards when first make request for authorisation and gets permissions second checks for permissions

Two guards when first make request for authorisation and gets permissions second checks for permissions

This method only works with angular 4.3.2 or higher see https://github.com/angular/angular/issues/15670

There are a lot of times you have 2 guard one for authorisation when it makes request for permissions and second is permissions guard and you want them to work in chain. To make them work in chain You should use them next

let routes = [
  { path: '', 
    canActivate: [AuthGuard],
    children: [
      {path: 'component', 
      component: ComponentName, 
      canActivate: [NgxPermissionsGuard],
      data: {
         permissions: {
           only: ['ADMIN', 'MODERATOR'],
           redirectTo: 'another-route'
         }
       }}
    ]
  }
]

Note: Make sure the permission request in chained in auth guard

   canActivate() {
       return authLogin().then((obj) => {
           // or load here if you dont need second request
           // this.permissions.service.loadPermissions(obj.permissions)
          
           return this.authPermissions.getPermissions('url');
       }).then((permissions) => {
           this.permissions.service.loadPermissions(permissions)
       )
   }