How do I use guards in Angular CLI?

How do I use guards in Angular CLI?

In Angular, guards are used to control access to routes. You can create route guards using the Angular CLI with the command ng generate guard guardName. This will create a guard file where you can implement logic to allow or deny access.

What types of guards can I create?

You can create several types of guards: CanActivate, CanActivateChild, CanDeactivate, Resolve, and CanLoad. Each serves a different purpose in route protection.

Can you give me an example of a CanActivate guard?

Sure! A CanActivate guard checks if a user is logged in before allowing access to a route. You can implement it like this:

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;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

How do I apply the guard to a route?

You can apply the guard in your routing module like this:

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