How authorization works


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.

Anjul Mishra

Hi Anjul,

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

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

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

    return, 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'])">

I hope this helps,

This is very helpful.