What is an Angular guard and how do I use it?

What is an Angular guard and how do I use it?

An Angular guard is a feature that allows you to control access to routes in your application. You can use guards to prevent unauthorized access to certain routes.

Can you give me an example of how to implement a route guard?

Sure! You can create a guard by implementing the CanActivate interface. 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] },
  { path: 'login', component: LoginComponent }
];

What happens if the guard returns false?

If the guard returns false, the router will not navigate to the protected route, and you can redirect the user to a different route, like a login page.