How authorization works

Hi,

I have successfully added a page which has access based on user roles. How ever I am not able to find the code in the generated application to find that how is it working internally.
Which piece of code client/server side decides to show a page or not based on user roles i.e there is no ngif=security.IsInRoles(*) method in the HTML.

Can you please provide the details.

Regards,
Anjul Mishra

Hi Anjul,

The code which does security.isInRole is in the auth.guard.ts file:

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private security: SecurityService) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const roles = route.data.roles as string[];

    return this.security.canActivate(roles, state);
  }
}

That class is used when defining the routes of the Angular application which Radzen produces (app.routes.ts):

export const routes: Routes = [
 {
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: 'categories',
        canActivate: [AuthGuard],
        data: {
          roles: ['Authenticated'],
        },
        component: CategoriesComponent
      }
   ]
  }
];

The rest is done by the Angular router - it uses the canActivate option to perform the authorization checks.

The navigation components (e.g. the PanelMenu in the Main layout) also use security.isInRole to check if the current user should see a particular page:

  <rz-panelmenu #panelmenu0 [style]="{'height':'100%'}">
    <rz-panelmenu-item text="Categories" path="categories" *ngIf="security?.isInRole(['Authenticated'])">
    </rz-panelmenu-item>
  </rz-panelmenu>

I hope this helps,
Atanas

This is very helpful.
Thanks