Angular - How to combine AuthGuard and RoleGuard

Question

In Angular-13 project I have three roles: Admin, Teacher and Student. User can only have one role.

I have the user model with the response as shown below:

user.ts:

export interface IResponse<T> {
  message: string;
  code: number;
  results: T;
}

export interface IUser {
  token?: string;
  roles?: string[];
}

AuthService:

export class AuthService {
  baseUrl = environment.apiUrl;
  constructor(private http: HttpClient, private router: Router) { }

  login(model: any){
    return this.http.post<IResponse<IUser>>(this.baseUrl+'auth/login', model).pipe(
      tap((response)=>{
        const user = response.results;
    return user;
      })
    )
  }

  getToken(): string | null {
    return localStorage.getItem('token');
  } 

  isLoggedIn() string | null {
    return this.getToken();
  } 
}

When user logs in, the token and role are stored in the localStorage. Also the user is redirected to dashboard based on the role.

login.component:

login(){
 this.authService.login(this.loginForm.value).subscribe({
  next: (res: any) => {
if (res.result.roles[0] == 'Admin'){
     this .router.vavigateByUrl('/admin-dashboard');
    } else if (res.result.roles[0] == 'Teacher'){
     this .router.vavigateByUrl('/teacher-dashboard');
    }else {
     this .router.vavigateByUrl('student-dashboard');
    }
     localStorage.setItem('token', JSON.stringify(res.result.token));
     localStorage.setItem('role', JSON.stringify(res.result.role[0]));
   }
  })
}

auth.guards:

export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private toastr: ToastrService, private router: Router) { }

canActivate(route: ActivateRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
if (!this.authService.isLoggedIn()) {
      this.toastr.info('Please Log In');
      this.router.navigate(['/login']);
      return false; 
    }
    this.authService.isLoggedIn()
    return true
  }
}

app-routing.module:

const routes: Routes = [
  {path: '', redirectTo: 'login', pathMatch: 'full'},
  {path: 'teacher-dashboard', canActivate: [AuthGuard], loadChildren: () => import('./feature/teacher/teacher.module').then(m => m.TeacherModule)},
  {path: 'login', loadChildren: () => import('./feature/login/login.module').then(m => m.AuthModule)},
  {path: 'student-dashboard', canActivate: [AuthGuard], loadChildren: () => import('./feature/student/student.module').then(m => m.StudentModule)},
  {path: 'admin-dashboard', canActivate: [AuthGuard], loadChildren: () => import('./feature/admin/admin.module').then(m => m.AdminModule)},
];

As shown above, I have already secure the route with AuthGuard. How do I still secure the route with Role so that, student don't get to teacher-dashboard, admin-dashbaord, and vice versa?

Thank you

Answer 1

canActivate takes an array of Guards. So your RoleGuard can be added next to AuthGuard, and you should be good to go.

{path: 'teacher-dashboard', canActivate: [AuthGuard, RoleGuard], loadChildren: () => import('./feature/teacher/teacher.module').then(m => m.TeacherModule)}

As the guards are executed in serial, so your RoleGuard can simply take role information about the logged-in user and redirect accordingly.

role.guard.ts

canActivate(): boolean {
  if (localStorage.get('role') === 'teacher') {
    return true;
  }
  return this.router.navigate('some other url');
}

FYI, you are setting both item to same key:

localStorage.setItem('token', JSON.stringify(res.result.token));
localStorage.setItem('token', JSON.stringify(res.result.role[0])); // make it 'role'