Angular Route Guards are a powerful mechanism for controlling access to specific routes within your Angular application. They act as gatekeepers, determining whether a user can navigate to a particular route based on certain conditions.

Route Guard Concept

Imagine your Angular app as a house with different rooms. Route Guards are like security personnel stationed at the entrance of each room. They decide who can enter based on predefined rules. This ensures only authorized users can access sensitive information or functionality.

Types of Route Guards

Angular offers two primary types of route guards:

• **CanActivate:** This guard determines if a user can navigate *to* a specific route.
• **CanDeactivate:** This guard controls whether a user can *leave* a particular route.

Implementing Route Guards

Implementing a Route Guard involves creating a class that implements the `CanActivate` or `CanDeactivate` interface. Here's a basic 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(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (localStorage.getItem('isLoggedIn')) {
      return true; // Allow access if logged in
    } else {
      this.router.navigate(['/login']); // Redirect to login if not logged in
      return false;
    }
  }
}

Example of Route Guard

Let's demonstrate using the `AuthGuard` we just defined. We want to protect the `admin` route, allowing only logged-in users to access it. In your `app-routing.module.ts`, you would configure the route like this:

import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard]
  },
  // Other routes
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Summary

• Angular Route Guards enforce access control for routes.
• Two main types: `CanActivate` for entry and `CanDeactivate` for exit.
• Implement guards as classes with the appropriate interface.
• Use `canActivate` property in your routes to define guards.