What are route guards in Angular and how do I use them?

What are route guards in Angular and how do I use them?

Route guards in Angular are interfaces that allow you to control access to routes based on certain conditions. They can prevent unauthorized access to certain parts of your application.

Can you explain the different types of route guards?

Sure! There are four main types of route guards: CanActivate, CanActivateChild, CanDeactivate, and Resolve. Each serves a different purpose in route management.

How do I implement a CanActivate guard?

To implement a CanActivate guard, you need to create a service that implements the CanActivate interface and then provide it in your routing module.

Can you show me a code example?

Absolutely! 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(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    const isLoggedIn = // your logic here;
    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.