How do I implement authentication guard roles in Angular CLI?

How do I implement authentication guard roles in Angular CLI?

To implement authentication guard roles in Angular CLI, you can create a guard using the Angular CLI command ng generate guard auth. This guard will help you manage access based on user roles.

What are the steps to create a role-based guard?

First, define your user roles in a service. Then, in your guard, inject this service and check the user's role in the canActivate method.

Can you show me an example of the code for the guard?

Sure! Here's a simple example:

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.

What if I want to protect multiple routes with different roles?

You can use the same guard for multiple routes by specifying different expectedRole values in your route configuration. Just ensure your guard logic can handle the different roles accordingly.