What are some advanced examples of Angular routing guards?

Can you explain what routing guards are in Angular?

Routing guards in Angular are interfaces that allow you to control access to routes based on certain conditions.

What are some advanced examples of using routing guards?

Advanced examples include using guards for role-based access control, lazy loading, and preventing unsaved changes.

How do I implement a role-based guard?

You can create a guard by implementing the CanActivate interface and checking the user's role in the guard's logic.

Can you show me a code snippet for that?

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;
  }
}