What are some examples of using guards in Angular CLI?

Can you explain what guards are in Angular CLI?

Guards in Angular are used to control access to routes. They can prevent unauthorized access to certain parts of your application.

What are some examples of guards I can implement?

You can implement CanActivate, CanDeactivate, Resolve, and CanLoad guards. Each serves a different purpose in route protection.

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

Sure! 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 to check if user is logged in;
    if (!isLoggedIn) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

How do I apply this guard to a route?

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

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