What are some examples of using auth guards in Angular?

What are some examples of using auth guards in Angular?

Auth guards in Angular are used to control access to routes. For example, you can create a CanActivate guard to prevent unauthorized users from accessing certain routes.

Can you show me a simple code example of a CanActivate guard?

Sure! Here's a basic example:

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

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    }
    this.router.navigate(['/login']);
    return false;
  }
}

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

What other types of guards are there in Angular?

In addition to CanActivate, Angular provides CanActivateChild, CanDeactivate, Resolve, and CanLoad guards, each serving different purposes for route protection.

How do I implement a CanDeactivate guard?

To implement a CanDeactivate guard, you create a service that implements the CanDeactivate interface. It allows you to prevent navigation away from a route if certain conditions are met.