What are Angular Auth Guards and how do I use them?

What are Angular Auth Guards and how do I use them?

Angular Auth Guards are services that control access to routes in your Angular application. They help protect routes from unauthorized access.

Can you give me an example of how to implement an Auth Guard?

Sure! You can create an Auth Guard by implementing the CanActivate interface. Here's a simple example:

import { Injectable } from '@angular/core';
import { CanActivate, 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(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

How do I protect multiple routes using the same Auth Guard?

You can apply the Auth Guard to multiple routes in your routing module. Just add the canActivate property to each route you want to protect:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] }
];

What happens if the Auth Guard returns false?

If the Auth Guard returns false, the router will prevent navigation to that route and can redirect the user to a different route, like a login page.