Common use cases

Common use cases

Overview

1. Two guards when first make request for authorisation and gets permissions second checks for permissions
2. Save permissions on page refresh
3. Disable element
4. Confusion with roles

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

Save permissions on page refresh

When user refreshed the page all data is lost including permissions for that user. There are a lot of approaches saving user permissions depending on your business requirements. But most common is to save them to localStorage. And then load them from localStorage when an application starts.

login() {
       return authLogin().then((obj) => {
           // Save permissions to localStorage.
           localStorage.setItem('permissions', JSON.stringify(obj.permissions));

           this.permissions.service.loadPermissions(obj.permissions);                
       })
   }

Disable element

To disable element specify disable and enable function in your main component

this.ngxPermissionsConfigurationService.addPermissionStrategy('disable', (templateRef: TemplateRef) => {
             this.renderer2.setAttribute(tF.elementRef.nativeElement.nextSibling, 'disabled', 'true');
              //or directly not recommended
             templateRef.elementRef.nativeElement.nextSibling.setAttribute('disabled', true)
        });


this.ngxPermissionsConfigurationService.addPermissionStrategy('enable', (templateRef: TemplateRef) => {
             this.renderer2.removeAttribute(tF.elementRef.nativeElement.nextSibling, 'disabled');
        });

Then You can use this strategy with ngxPermissions directive

<button  *ngxPermissionsOnly="'ADMIN'; authorisedStrategy: 'enable'; unauthorisedStrategy: 'disable'">
            <div>Admin will only see this</div>
</button>

You can also set disable and enable as default behavior then you don't need to specify authorisedStrategy with directive. But Be sure to specify 'enable' and 'disable' functions above with ngxPermissionsConfigurationService.addPermissionStrategy.

 this.ngxPermissionsConfigurationService.setDefaultOnAuthorizedStrategy('enable');

      or

 this.ngxPermissionsConfigurationService.setDefaultOnUnauthorizedStrategy('disable')


<button  *ngxPermissionsOnly="'ADMIN'">
            <div>This button will be disabled if user has no permissions or role 'admin'</div>
</button>

Confusion with roles

Given

.addRoles({
'USER': ['canReadInvoices'],
'ADMIN': ['canReadInvoices', 'canEditInvoices', 'canUploadImages'],
'MANAGER': ['canEditInvoices'],
});

based on comment yd021976 Thank to him a lot

Hi, if I can help :

• If you use "roles", then use in your template the role name to check permissions e.g, according to the @cubet-rahul code sample: <a *ngxPermissionsOnly="['ADMIN']" href="#" data-toggle="modal"></a> This will allow "ADMIN" role only, but all permissions of ADMIN role

• If you use "permissions", then use "permission name" in your template e.g, according to the @cubet-rahul code sample: <a *ngxPermissionsOnly="['canEditInvoices']" href="#" data-toggle="modal"></a> this will allow users that have "canEditInvoices", no matter of their roles

In addition, if this doesn't fit your needs, you can provide a validation function when defining role and/or permission. Example: NgxRolesService.addRole('ADMIN",()=>{ check whatever you want and return boolean })

Hope it helps