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 allow you to control access to routes in your application. They can be used to protect routes based on conditions like authentication or permissions. Advanced examples include using guards for role-based access control and implementing asynchronous checks.

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

To implement a role-based guard, you can create a guard service that checks the user's role against the required roles for a route. Use the CanActivate interface and inject the authentication service to get the user's role.

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 for the route.

What if I want to implement multiple guards for a single route?

You can use multiple guards by providing an array of guards in the route configuration. Angular will execute them in the order they are defined, and the route will only be activated if all guards return true.