How do I use guards in Angular routing with Angular CLI?

How do I use guards in Angular routing with Angular CLI?

You can use guards in Angular routing to control access to routes. First, generate a guard using the Angular CLI with the command ng generate guard guardName. Then, implement the CanActivate interface in your guard class to define the logic for route access.

What are the different types of guards I can use?

There are several types of guards in Angular: CanActivate, CanActivateChild, CanDeactivate, Resolve, and CanLoad. Each serves a different purpose in route protection and data resolution.

Can you give me an example of a CanActivate guard?

Sure! Here's a simple example of a CanActivate guard:

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 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.

How do I apply this guard to a route?

To apply the guard, you can add it to your route configuration in the app-routing.module.ts file like this:

const routes: Routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] },
  // other routes
];

This ensures that the AuthGuard is checked before accessing the protected route.