What are some advanced examples of Angular guards?

Can you explain what Angular guards are and provide some advanced examples?

Angular guards are interfaces that can control navigation in Angular applications. They can prevent or allow access to routes based on certain conditions. Advanced examples include using guards for role-based access control and implementing asynchronous checks with observables.

How can I implement a role-based guard in my Angular app?

To implement a role-based guard, create a guard service that implements the CanActivate interface. In the canActivate method, check the user's role and return true or false based on whether they have access.

Can you show me a code snippet for a role-based 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 defined in the route.

What if I need to check multiple roles?

You can modify the guard to accept an array of roles and check if the user's role is included in that 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;
}