How to protect FeatureModule with guard condition using Guard

Question

In an Angular-13 application I have these roles:

Roles: Admin, Principal, Teacher and AssistantTeacher

The users can have only one role.

I have these guards:

export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private toastr: ToastrService, private router: Router) { }
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable
    | Promise
    | boolean
    | UrlTree {
    if (!this.authService.isLoggedIn()) {
      this.toastr.info('Please Log In!');
      this.router.navigate(['/auth']);
      return false;
    }
    this.authService.isLoggedIn();
    return true;
  }
}

export class AdminGuard implements CanActivate {
  checkStatus!: boolean;
  constructor(private authService: AuthService, private toastr: ToastrService, private router: Router) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable | Promise | boolean | UrlTree {
    return this.checkStatus = this.authService.isAdmin();
  }
}

export class PrincipalGuard implements CanActivate {
  checkStatus!: boolean;
  constructor(private authService: AuthService, private toastr: ToastrService, private router: Router) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable | Promise | boolean | UrlTree {
      return this.checkStatus = this.authService.isPrincipal();
  }
}

AuthService:

  public isAdmin(): boolean {
    if (localStorage.getItem("role") === "Admin") {
      return true
    } else {
      this.toastr.info('Forbidden!');
      this.router.navigate(['/auth']);
      return false;
    };
  }

  public isPrincipal(): boolean {
    if (localStorage.getItem("role") === "Principal") {
      return true
    } else {
      this.toastr.info('Forbidden!');
      this.router.navigate(['/auth']);
      return false;
    };
  }

I have several Feature Modules, such as AdminModule, TeacherModule, ...

Below is my app-routing.module:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'auth',
    pathMatch: 'full'
  },
  { path: 'server-error', component: ServerErrorComponent, data: {breadcrumb: 'Server Error'} },
  { path: 'not-found', component: NotFoundComponent, data: {breadcrumb: 'Not Found'} },
  {
    path: 'admin-dashboard',
    canActivate: [AuthGuard, AdminGuard],
  loadChildren: () => import('./feature/admin/admin.module').then(m => m.AdminModule)
},
  { path: '**', redirectTo: 'not-found', pathMatch: 'full' }
];

From the above code, I want to protect the AdminModule (admin-dashboard) with AuthGuard and AdminGuard or Principal. That means, the user must have the role of Admin or Principal in order to access it.

That means AuthGuard && (AdminGuard || Principal)

How do I modify

canActivate: [AuthGuard, AdminGuard]

to achieve this?

Thank you

How to protect FeatureModule with guard condition using Guard

0 Answers