What are some examples of Angular router guards?

What are some examples of Angular router guards?

Angular router guards are used to control access to routes in an Angular application. Examples include CanActivate, CanDeactivate, and Resolve guards.

Can you explain how CanActivate works?

Sure! CanActivate is a guard that determines if a route can be activated. It returns true if the user can access the route, or false if not.

What about CanDeactivate? How is it different?

CanDeactivate is used to prevent users from navigating away from a route. It prompts the user to confirm if they want to leave, useful for unsaved changes.

Can you give me a code example of a CanActivate guard?

Certainly! Here's a simple example:

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

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const isLoggedIn = // logic to check if user is logged in;
    if (!isLoggedIn) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

This guard checks if the user is logged in before allowing access to a route.