How do I implement role-based access control in Angular using Auth Guards?

How do I implement role-based access control in Angular using Auth Guards?

To implement role-based access control in Angular, you can use Auth Guards to protect routes based on user roles.

Can you show me a code example of an Auth Guard for roles?

Sure! Here's a simple example of an Auth Guard that checks for user roles:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class RoleGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    const expectedRole = next.data.expectedRole;
    const userRole = this.authService.getUserRole();

    if (userRole !== expectedRole) {
      this.router.navigate(['access-denied']);
      return false;
    }
    return true;
  }
}

This guard checks if the user's role matches the expected role for the route.

What if I want to protect multiple roles for a route?

You can modify the guard to check for multiple roles by using an array. Here's an example:

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): boolean {
  const expectedRoles = next.data.expectedRoles;
  const userRole = this.authService.getUserRole();

  if (!expectedRoles.includes(userRole)) {
    this.router.navigate(['access-denied']);
    return false;
  }
  return true;
}

This way, the route can be accessed if the user's role matches any of the expected roles.