Angular — Guards

What are Guards?

Guards control access to routes based on conditions.

CanActivate Guard

// auth.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  if (authService.isLoggedIn()) {
    return true;
  }
  
  router.navigate(['/login']);
  return false;
};

Using Guard

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

CanDeactivate Guard

export const unsavedChangesGuard: CanDeactivateFn<any> = (component) => {
  if (component.hasUnsavedChanges()) {
    return confirm('You have unsaved changes. Leave anyway?');
  }
  return true;
};

CanMatch Guard

export const canMatchGuard: CanMatchFn = (route, segments) => {
  const authService = inject(AuthService);
  return authService.hasRole(route.data['role']);
};

Guard Types

Guard	Purpose
canActivate	Before entering route
canActivateChild	Before child routes
canDeactivate	Before leaving route
canMatch	Before matching route

Mini Practice

1. Create an auth guard
2. Protect admin routes
3. Add unsaved changes guard
4. Use role-based guards

Up Next

Continue with Interceptors — HTTP interceptors.