🚦Modern Angular Guards: Architecture, Best Practices & Enterprise Patterns

Guard → Authorization Service → Permission Engine → Decision

// ❌ Legacy Class Guard (still works, but not recommended for new code)
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private auth: AuthService,
    private router: Router
  ) {}
  canActivate(): boolean | UrlTree {
    return this.auth.isAuthenticated() 
      ? true 
      : this.router.parseUrl('/login');
  }
}
// ✅ Modern Functional Guard
export const authGuard: CanActivateFn = (): boolean | UrlTree => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isAuthenticated() 
    ? true 
    : router.parseUrl('/login');
};

// guards/auth.guard.ts
import { CanActivateFn, Router, UrlTree } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from '../services/auth.service';
/**
 * Authentication guard that checks if the user is logged in.
 * Redirects to login page if not authenticated.
 */
export const authGuard: CanActivateFn = (): boolean | UrlTree => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isAuthenticated() 
    ? true 
    : router.parseUrl('/login');
};

// app.routes.ts
import { Routes } from '@angular/router';
import { authGuard } from './guards/auth.guard';
export const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [authGuard],
    loadComponent: () => import('./dashboard/dashboard.component')
      .then(m => m.DashboardComponent)
  }
];

// guards/permission.guard.ts
import { CanMatchFn } from '@angular/router';
import { inject } from '@angular/core';
import { PermissionService } from '../services/permission.service';
/**
 * Creates a CanMatch guard that checks for a specific role.
 * Prevents route registration if the user doesn't have the role.
 */
export const canMatchRole = (role: string): CanMatchFn => {
  return () => {
    const permissions = inject(PermissionService);
    return permissions.hasRole(role);
  };
};
// Usage in routes
export const routes: Routes = [
  {
    path: 'admin',
    canMatch: [canMatchRole('admin')],
    loadChildren: () => import('./admin/admin.routes')
      .then(m => m.ADMIN_ROUTES)
  }
];

// guards/combined-match.guard.ts
import { CanMatchFn } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { PermissionService } from '../services/permission.service';
import { FeatureFlagService } from '../services/feature-flag.service';
/**
 * Combined guard that checks auth, permissions, and feature flags.
 * All conditions must pass for the route to match.
 */
export const combinedMatchGuard: CanMatchFn = () => {
  const auth = inject(AuthService);
  const permissions = inject(PermissionService);
  const features = inject(FeatureFlagService);
  return auth.isAuthenticated() && 
         permissions.hasRole('admin') && 
         features.isEnabled('admin-portal');
};

// guards/unsaved-changes.guard.ts
import { CanDeactivateFn } from '@angular/router';
import { Observable } from 'rxjs';
/**
 * Interface for components that can prevent navigation.
 */
export interface CanComponentDeactivate {
  canDeactivate: () => boolean | Observable<boolean> | Promise<boolean>;
}
/**
 * Guard that checks if a component has unsaved changes before allowing navigation.
 */
export const unsavedChangesGuard: CanDeactivateFn<CanComponentDeactivate> = 
  (component) => {
    // If component implements the interface, delegate to it
    if (component.canDeactivate) {
      return component.canDeactivate();
    }
    // Otherwise, allow navigation
    return true;
  };

// profile-edit.component.ts
import { Component, signal } from '@angular/core';
import { CanComponentDeactivate } from '../guards/unsaved-changes.guard';
@Component({
  selector: 'app-profile-edit',
  template: `...`,
  standalone: true
})
export class ProfileEditComponent implements CanComponentDeactivate {
  private originalData = signal<ProfileData>({ name: '', email: '' });
  private currentData = signal<ProfileData>({ name: '', email: '' });
  readonly hasUnsavedChanges = computed(() => 
    JSON.stringify(this.originalData()) !== JSON.stringify(this.currentData())
  );
  canDeactivate(): boolean {
    if (!this.hasUnsavedChanges()) {
      return true;
    }
    return confirm('You have unsaved changes. Are you sure you want to leave?');
  }
}

export const routes: Routes = [
  {
    path: 'profile/edit',
    canDeactivate: [unsavedChangesGuard],
    loadComponent: () => import('./profile-edit.component')
      .then(m => m.ProfileEditComponent)
  }
];

// guards/auth-child.guard.ts
import { CanActivateChildFn, Router, UrlTree } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from '../services/auth.service';
/**
 * Guard that protects all child routes.
 * Checks authentication before allowing access to any child route.
 */
export const authChildGuard: CanActivateChildFn = (): boolean | UrlTree => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isAuthenticated() 
    ? true 
    : router.parseUrl('/login');
};

export const routes: Routes = [
  {
    path: 'admin',
    canActivateChild: [authChildGuard],
    loadComponent: () => import('./admin-shell.component')
      .then(m => m.AdminShellComponent),
    children: [
      {
        path: 'users',
        loadComponent: () => import('./users/users.component')
      },
      {
        path: 'settings',
        loadComponent: () => import('./settings/settings.component')
      }
    ]
  }
];

// services/permission.service.ts
import { Injectable, signal, computed } from '@angular/core';
export interface User {
  id: string;
  name: string;
  roles: string[];
  permissions: string[];
}
@Injectable({ providedIn: 'root' })
export class PermissionService {
  // Private writable signal
  private user = signal<User | null>(null);
  // Public readonly computed signals
  readonly roles = computed(() => this.user()?.roles ?? []);
  readonly permissions = computed(() => this.user()?.permissions ?? []);
  readonly isAdmin = computed(() => 
    this.roles().includes('admin')
  );
  readonly isModerator = computed(() => 
    this.roles().includes('moderator')
  );
  // Dynamic permission check using computed
  readonly canAccess = (resource: string) => computed(() =>
    this.permissions().includes(resource)
  );
  // Synchronous methods for guard usage
  hasRole(role: string): boolean {
    return this.roles().includes(role);
  }
  hasPermission(permission: string): boolean {
    return this.permissions().includes(permission);
  }
  // Update user state
  setUser(user: User | null): void {
    this.user.set(user);
  }
  clearUser(): void {
    this.user.set(null);
  }
}

// guards/admin.guard.ts
import { CanActivateFn, Router, UrlTree } from '@angular/router';
import { inject } from '@angular/core';
import { PermissionService } from '../services/permission.service';
/**
 * Guard that checks if the user has admin role.
 * Reads directly from the reactive signal state.
 */
export const adminGuard: CanActivateFn = (): boolean | UrlTree => {
  const permissions = inject(PermissionService);
  const router = inject(Router);
  // Direct signal read — no subscriptions, no memory leaks
  return permissions.isAdmin() 
    ? true 
    : router.parseUrl('/unauthorized');
};

// guards/permission.guard.ts
import { CanActivateFn, Router, UrlTree, ActivatedRouteSnapshot } from '@angular/router';
import { inject } from '@angular/core';
import { PermissionService } from '../services/permission.service';
/**
 * Creates a guard that checks for a specific permission.
 * The permission can be passed via route data.
 */
export const permissionGuard = (requiredPermission?: string): CanActivateFn => {
  return (route: ActivatedRouteSnapshot): boolean | UrlTree => {
    const permissions = inject(PermissionService);
    const router = inject(Router);
    // Use route data if no permission provided
    const permission = requiredPermission ?? route.data['requiredPermission'];
    if (!permission) {
      console.warn('No permission specified for route:', route.url);
      return router.parseUrl('/unauthorized');
    }
    return permissions.hasPermission(permission) 
      ? true 
      : router.parseUrl('/unauthorized');
  };
};

// services/feature-flag.service.ts
import { Injectable, signal, computed } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class FeatureFlagService {
  private flags = signal<Record<string, boolean>>({});
  readonly enabledFlags = computed(() => 
    Object.entries(this.flags())
      .filter(([, enabled]) => enabled)
      .map(([name]) => name)
  );
  isEnabled(flag: string): boolean {
    return this.flags()[flag] ?? false;
  }
  setFlag(flag: string, enabled: boolean): void {
    this.flags.update(current => ({
      ...current,
      [flag]: enabled
    }));
  }
  setFlags(flags: Record<string, boolean>): void {
    this.flags.set(flags);
  }
}

// guards/feature-flag.guard.ts
import { CanMatchFn, Router, UrlTree } from '@angular/router';
import { inject } from '@angular/core';
import { FeatureFlagService } from '../services/feature-flag.service';
/**
 * Creates a CanMatch guard that checks if a feature flag is enabled.
 * Prevents route registration if the feature is disabled.
 */
export const featureFlagGuard = (flag: string): CanMatchFn => {
  return () => {
    const features = inject(FeatureFlagService);
    const router = inject(Router);
    return features.isEnabled(flag) 
      ? true 
      : router.parseUrl('/not-found');
  };
};

export const routes: Routes = [
  {
    path: 'beta-dashboard',
    canMatch: [featureFlagGuard('beta-dashboard')],
    loadComponent: () => import('./beta-dashboard.component')
  },
  {
    path: 'new-analytics',
    canMatch: [featureFlagGuard('new-analytics')],
    loadChildren: () => import('./analytics/analytics.routes')
  }
];

// guards/composition.guard.ts
import { CanActivateFn, Router, UrlTree } from '@angular/router';
import { inject } from '@angular/core';
/**
 * Composes multiple guards into a single guard.
 * All guards must return true for navigation to proceed.
 */
export const composeGuards = (...guards: CanActivateFn[]): CanActivateFn => {
  return (route, state) => {
    const router = inject(Router);
    for (const guard of guards) {
      const result = guard(route, state);
      if (result !== true) {
        return result; // Return the first failure (UrlTree or false)
      }
    }
    return true;
  };
};
// Usage
export const adminRouteGuard = composeGuards(
  authGuard,
  adminGuard,
  (route) => {
    // Inline guard for specific route logic
    const router = inject(Router);
    const features = inject(FeatureFlagService);
    return features.isEnabled('admin-portal') 
      ? true 
      : router.parseUrl('/coming-soon');
  }
);

// guards/role-composition.guard.ts
import { CanActivateFn, Router, UrlTree } from '@angular/router';
import { inject } from '@angular/core';
import { PermissionService } from '../services/permission.service';
/**
 * Creates a guard that requires ANY of the specified roles.
 */
export const requireAnyRole = (...roles: string[]): CanActivateFn => {
  return () => {
    const permissions = inject(PermissionService);
    const router = inject(Router);
    const hasAnyRole = roles.some(role => permissions.hasRole(role));
    return hasAnyRole 
      ? true 
      : router.parseUrl('/unauthorized');
  };
};
/**
 * Creates a guard that requires ALL of the specified roles.
 */
export const requireAllRoles = (...roles: string[]): CanActivateFn => {
  return () => {
    const permissions = inject(PermissionService);
    const router = inject(Router);
    const hasAllRoles = roles.every(role => permissions.hasRole(role));
    return hasAllRoles 
      ? true 
      : router.parseUrl('/unauthorized');
  };
};
// Usage
export const routes: Routes = [
  {
    path: 'moderator',
    canActivate: [requireAnyRole('admin', 'moderator')],
    loadComponent: () => import('./moderator.component')
  },
  {
    path: 'super-admin',
    canActivate: [requireAllRoles('admin', 'superuser')],
    loadComponent: () => import('./super-admin.component')
  }
];

// ❌ Bad: Imperative navigation
export const badRedirectGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  if (!auth.isAuthenticated()) {
    router.navigate(['/login']); // ❌ Side effect in guard
    return false;
  }
  return true;
};
// ✅ Good: Declarative UrlTree
export const goodRedirectGuard: CanActivateFn = (): boolean | UrlTree => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isAuthenticated() 
    ? true 
    : router.parseUrl('/login'); // ✅ Clean, declarative
};

export const loginRedirectGuard: CanActivateFn = (route): boolean | UrlTree => {
  const auth = inject(AuthService);
  const router = inject(Router);
  if (auth.isAuthenticated()) {
    return true;
  }
  // Redirect to login with return URL
  const returnUrl = route.url.map(s => s.path).join('/');
  return router.parseUrl(`/login?returnUrl=${encodeURIComponent(returnUrl)}`);
};

// guards/async-permission.guard.ts
import { CanActivateFn, Router, UrlTree } from '@angular/router';
import { inject } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map, catchError, take } from 'rxjs/operators';
import { PermissionService } from '../services/permission.service';
/**
 * Async guard that fetches permissions before allowing navigation.
 * Use sparingly — prefer cached permissions for better performance.
 */
export const asyncPermissionGuard = (requiredPermission: string): CanActivateFn => {
  return (): Observable<boolean | UrlTree> => {
    const permissions = inject(PermissionService);
    const router = inject(Router);
    return permissions.fetchPermissions().pipe(
      take(1),
      map(() => {
        return permissions.hasPermission(requiredPermission) 
          ? true 
          : router.parseUrl('/unauthorized');
      }),
      catchError(() => of(router.parseUrl('/error')))
    );
  };
};

// services/permission.service.ts (extended)
@Injectable({ providedIn: 'root' })
export class PermissionService {
  private user = signal<User | null>(null);
  private permissionsLoaded = signal(false);
  readonly isReady = computed(() => this.permissionsLoaded());
  fetchPermissions(): Observable<void> {
    // Return cached result if already loaded
    if (this.permissionsLoaded()) {
      return of(undefined);
    }
    const http = inject(HttpClient);
    return http.get<User>('/api/me').pipe(
      tap(user => {
        this.user.set(user);
        this.permissionsLoaded.set(true);
      }),
      map(() => undefined)
    );
  }
}

// services/permission.service.ts
import { Injectable, signal, computed } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap, shareReplay } from 'rxjs/operators';
export interface PermissionSet {
  roles: string[];
  permissions: string[];
  features: string[];
}
@Injectable({ providedIn: 'root' })
export class PermissionService {
  private http = inject(HttpClient);
  // Reactive state
  private permissionSet = signal<PermissionSet | null>(null);
  private loading = signal(false);
  // Computed values
  readonly roles = computed(() => this.permissionSet()?.roles ?? []);
  readonly permissions = computed(() => this.permissionSet()?.permissions ?? []);
  readonly features = computed(() => this.permissionSet()?.features ?? []);
  // Permission checks
  readonly isAdmin = computed(() => this.hasRole('admin'));
  readonly isModerator = computed(() => this.hasRole('moderator'));
  // Cache for fetchPermissions
  private permissions$?: Observable<PermissionSet>;
  /**
   * Fetches permissions from the server.
   * Results are cached to avoid repeated API calls.
   */
  fetchPermissions(): Observable<PermissionSet> {
    if (this.permissions$) {
      return this.permissions$;
    }
    this.loading.set(true);
    this.permissions$ = this.http.get<PermissionSet>('/api/permissions').pipe(
      tap(set => {
        this.permissionSet.set(set);
        this.loading.set(false);
      }),
      shareReplay(1)
    );
    return this.permissions$;
  }
  /**
   * Synchronous role check.
   * Use in guards for fast decisions.
   */
  hasRole(role: string): boolean {
    return this.roles().includes(role);
  }
  /**
   * Synchronous permission check.
   */
  hasPermission(permission: string): boolean {
    return this.permissions().includes(permission);
  }
  /**
   * Check if a feature is enabled.
   */
  hasFeature(feature: string): boolean {
    return this.features().includes(feature);
  }
  /**
   * Check if user has any of the specified roles.
   */
  hasAnyRole(roles: string[]): boolean {
    return roles.some(role => this.hasRole(role));
  }
  /**
   * Check if user has all specified permissions.
   */
  hasAllPermissions(permissions: string[]): boolean {
    return permissions.every(p => this.hasPermission(p));
  }
  /**
   * Clear cached permissions (e.g., on logout).
   */
  clear(): void {
    this.permissionSet.set(null);
    this.permissions$ = undefined;
  }
}

// guards/rbac.guard.ts
import { CanActivateFn, Router, UrlTree, ActivatedRouteSnapshot } from '@angular/router';
import { inject } from '@angular/core';
import { PermissionService } from '../services/permission.service';
/**
 * Route data interface for RBAC configuration.
 */
export interface RBACData {
  requiredRoles: string[];
  requireAll?: boolean; // Default: false (any role is sufficient)
}
/**
 * RBAC guard that checks user roles from route data.
 */
export const rbacGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot
): boolean | UrlTree => {
  const permissions = inject(PermissionService);
  const router = inject(Router);
  const data = route.data as RBACData;
  const requiredRoles = data.requiredRoles ?? [];
  if (requiredRoles.length === 0) {
    console.warn('No roles specified for route:', route.url);
    return true; // Allow if no roles specified
  }
  const hasAccess = data.requireAll 
    ? requiredRoles.every(role => permissions.hasRole(role))
    : requiredRoles.some(role => permissions.hasRole(role));
  return hasAccess 
    ? true 
    : router.parseUrl('/unauthorized');
};

export const routes: Routes = [
  {
    path: 'admin',
    canActivate: [authGuard, rbacGuard],
    data: { requiredRoles: ['admin'] } as RBACData,
    loadComponent: () => import('./admin/admin.component')
  },
  {
    path: 'moderator',
    canActivate: [authGuard, rbacGuard],
    data: { requiredRoles: ['admin', 'moderator'] } as RBACData,
    loadComponent: () => import('./moderator/moderator.component')
  },
  {
    path: 'super-admin',
    canActivate: [authGuard, rbacGuard],
    data: { requiredRoles: ['admin', 'superuser'], requireAll: true } as RBACData,
    loadComponent: () => import('./super-admin/super-admin.component')
  }
];

// guards/pbac.guard.ts
import { CanActivateFn, Router, UrlTree, ActivatedRouteSnapshot } from '@angular/router';
import { inject } from '@angular/core';
import { PermissionService } from '../services/permission.service';
/**
 * Route data interface for PBAC configuration.
 */
export interface PBACData {
  requiredPermissions: string[];
  requireAll?: boolean; // Default: true (all permissions required)
}
/**
 * PBAC guard that checks specific permissions from route data.
 */
export const pbacGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot
): boolean | UrlTree => {
  const permissions = inject(PermissionService);
  const router = inject(Router);
  const data = route.data as PBACData;
  const requiredPermissions = data.requiredPermissions ?? [];
  if (requiredPermissions.length === 0) {
    return true;
  }
  const requireAll = data.requireAll ?? true;
  const hasAccess = requireAll 
    ? requiredPermissions.every(p => permissions.hasPermission(p))
    : requiredPermissions.some(p => permissions.hasPermission(p));
  return hasAccess 
    ? true 
    : router.parseUrl('/unauthorized');
};

export const routes: Routes = [
  {
    path: 'users',
    canActivate: [authGuard, pbacGuard],
    data: { requiredPermissions: ['users:read'] } as PBACData,
    loadComponent: () => import('./users/users.component')
  },
  {
    path: 'users/create',
    canActivate: [authGuard, pbacGuard],
    data: { requiredPermissions: ['users:create'] } as PBACData,
    loadComponent: () => import('./users/create-user.component')
  },
  {
    path: 'reports',
    canActivate: [authGuard, pbacGuard],
    data: { 
      requiredPermissions: ['reports:read', 'reports:export'],
      requireAll: true 
    } as PBACData,
    loadComponent: () => import('./reports/reports.component')
  }
];

// models/route-data.model.ts
export interface RouteGuardData {
  requiredRoles?: string[];
  requiredPermissions?: string[];
  requiredFeatures?: string[];
  requireAll?: boolean;
  redirectTo?: string;
}
// Type-safe route configuration
export const routes: Routes = [
  {
    path: 'admin',
    canActivate: [authGuard, rbacGuard, pbacGuard],
    data: {
      requiredRoles: ['admin'],
      requiredPermissions: ['admin:access'],
      redirectTo: '/unauthorized'
    } as RouteGuardData,
    loadComponent: () => import('./admin/admin.component')
  }
];

// guards/generic.guard.ts
import { CanActivateFn, Router, UrlTree, ActivatedRouteSnapshot } from '@angular/router';
import { inject } from '@angular/core';
import { PermissionService } from '../services/permission.service';
import { RouteGuardData } from '../models/route-data.model';
/**
 * Generic guard that reads all configuration from route data.
 * Combines RBAC, PBAC, and feature flag checks.
 */
export const genericGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot
): boolean | UrlTree => {
  const permissions = inject(PermissionService);
  const router = inject(Router);
  const data = route.data as RouteGuardData;
  // Check roles
  if (data.requiredRoles?.length) {
    const hasRole = data.requireAll 
      ? data.requiredRoles.every(r => permissions.hasRole(r))
      : data.requiredRoles.some(r => permissions.hasRole(r));
    if (!hasRole) {
      return router.parseUrl(data.redirectTo ?? '/unauthorized');
    }
  }
  // Check permissions
  if (data.requiredPermissions?.length) {
    const hasPermission = data.requireAll 
      ? data.requiredPermissions.every(p => permissions.hasPermission(p))
      : data.requiredPermissions.some(p => permissions.hasPermission(p));
    if (!hasPermission) {
      return router.parseUrl(data.redirectTo ?? '/unauthorized');
    }
  }
  // Check features
  if (data.requiredFeatures?.length) {
    const hasFeature = data.requiredFeatures.every(f => permissions.hasFeature(f));
    if (!hasFeature) {
      return router.parseUrl(data.redirectTo ?? '/unauthorized');
    }
  }
  return true;
};

// app.routes.ts
import { Routes } from '@angular/router';
import { authGuard } from './guards/auth.guard';
export const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [authGuard],
    loadChildren: () => import('./dashboard/dashboard.routes')
      .then(m => m.DASHBOARD_ROUTES)
  },
  {
    path: 'admin',
    canMatch: [canMatchRole('admin')],
    loadChildren: () => import('./admin/admin.routes')
      .then(m => m.ADMIN_ROUTES)
  }
];

// admin/admin.routes.ts
import { Routes } from '@angular/router';
import { authChildGuard } from '../guards/auth-child.guard';
import { rbacGuard } from '../guards/rbac.guard';
export const ADMIN_ROUTES: Routes = [
  {
    path: '',
    canActivateChild: [authChildGuard],
    loadComponent: () => import('./admin-shell.component')
      .then(m => m.AdminShellComponent),
    children: [
      {
        path: 'users',
        canActivate: [rbacGuard],
        data: { requiredRoles: ['admin'] },
        loadComponent: () => import('./users/users.component')
      },
      {
        path: 'settings',
        canActivate: [rbacGuard],
        data: { requiredRoles: ['admin', 'superuser'] },
        loadComponent: () => import('./settings/settings.component')
      }
    ]
  }
];

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding, withPreloading } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideRouter(
      routes,
      withComponentInputBinding(), // Bind route params to component inputs
      withPreloading(/* preloading strategy */)
    )
  ]
};

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { appConfig } from './app.config';
bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

// admin/admin.routes.ts
import { Routes } from '@angular/router';
import { AdminService } from './services/admin.service';
export const ADMIN_ROUTES: Routes = [
  {
    path: '',
    providers: [AdminService], // Scoped to admin routes only
    loadComponent: () => import('./admin-shell.component'),
    children: [
      {
        path: 'users',
        loadComponent: () => import('./users/users.component')
      }
    ]
  }
];

Guard (navigation decision)
    ↓
Interceptor (attach token)
    ↓
Backend (validate permissions)
    ↓
Response

// ❌ Never do this
export const insecureGuard: CanActivateFn = () => {
  // Checking localStorage is NOT secure
  return localStorage.getItem('isAdmin') === 'true';
};
// ✅ Do this instead
export const secureGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  // AuthService validates with the server
  return auth.isAuthenticated(); 
};

// ✅ Fast: Synchronous check
export const fastGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isAuthenticated(); // Cached value, instant
};
// ❌ Slow: HTTP call in guard
export const slowGuard: CanActivateFn = () => {
  const http = inject(HttpClient);
  return http.get('/api/check-auth').pipe(
    map(() => true),
    catchError(() => of(false))
  );
};

// ❌ Heavy pipeline
export const heavyGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const permissions = inject(PermissionService);
  return auth.getUser().pipe(
    switchMap(user => permissions.getForUser(user.id)),
    map(perms => perms.includes('admin')),
    distinctUntilChanged(),
    shareReplay(1),
    catchError(() => of(false))
  );
};
// ✅ Lightweight
export const lightGuard: CanActivateFn = () => {
  const permissions = inject(PermissionService);
  return permissions.isAdmin(); // Direct signal read
};

@Injectable({ providedIn: 'root' })
export class PermissionService {
  private permissions$?: Observable<PermissionSet>;
  fetchPermissions(): Observable<PermissionSet> {
    if (this.permissions$) {
      return this.permissions$; // Return cached observable
    }
    this.permissions$ = this.http.get<PermissionSet>('/api/permissions').pipe(
      shareReplay(1) // Cache the result
    );
    return this.permissions$;
  }
}

// app.config.ts
import { APP_INITIALIZER } from '@angular/core';
export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (permissions: PermissionService) => () => 
        permissions.fetchPermissions().toPromise(),
      deps: [PermissionService],
      multi: true
    }
  ]
};

export const authGuard: CanActivateFn = (route): boolean | UrlTree => {
  const auth = inject(AuthService);
  const router = inject(Router);
  if (auth.isAuthenticated()) {
    return true;
  }
  // Redirect to login with context
  const returnUrl = route.url.map(s => s.path).join('/');
  return router.parseUrl(`/login?returnUrl=${encodeURIComponent(returnUrl)}`);
};

// app.component.ts
@Component({
  selector: 'app-root',
  template: `
    @if (router.events | async; as event) {
      @if (event instanceof NavigationStart) {
        <app-loading-spinner />
      }
    }
    <router-outlet />
  `,
  standalone: true,
  imports: [RouterOutlet, RouterModule, LoadingSpinnerComponent]
})
export class AppComponent {
  readonly router = inject(Router);
}

export const safeGuard: CanActivateFn = (): boolean | UrlTree => {
  const auth = inject(AuthService);
  const router = inject(Router);
  try {
    return auth.isAuthenticated() 
      ? true 
      : router.parseUrl('/login');
  } catch (error) {
    console.error('Guard error:', error);
    return router.parseUrl('/error');
  }
};

// guards/error-safe.guard.ts
import { CanActivateFn, Router, UrlTree } from '@angular/router';
import { inject } from '@angular/core';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { AuthService } from '../services/auth.service';
/**
 * Guard with comprehensive error handling.
 * Never lets navigation fail silently.
 */
export const errorSafeGuard: CanActivateFn = (): Observable<boolean | UrlTree> => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.checkAuthentication().pipe(
    map(isAuth => {
      if (isAuth) {
        return true;
      }
      return router.parseUrl('/login');
    }),
    catchError(error => {
      console.error('Authentication check failed:', error);
      // Redirect to error page on failure
      return of(router.parseUrl('/error'));
    })
  );
};

// guards/auth.guard.spec.ts
import { TestBed } from '@angular/core/testing';
import { Router, UrlTree } from '@angular/router';
import { authGuard } from './auth.guard';
import { AuthService } from '../services/auth.service';
describe('authGuard', () => {
  let authService: jasmine.SpyObj<AuthService>;
  let router: jasmine.SpyObj<Router>;
  beforeEach(() => {
    authService = jasmine.createSpyObj('AuthService', ['isAuthenticated']);
    router = jasmine.createSpyObj('Router', ['parseUrl']);
    TestBed.configureTestingModule({
      providers: [
        { provide: AuthService, useValue: authService },
        { provide: Router, useValue: router }
      ]
    });
  });
  it('should allow navigation when authenticated', () => {
    authService.isAuthenticated.and.returnValue(true);
    const result = TestBed.runInInjectionContext(() => authGuard());
    expect(result).toBe(true);
  });
  it('should redirect to login when not authenticated', () => {
    authService.isAuthenticated.and.returnValue(false);
    const loginUrlTree = {} as UrlTree;
    router.parseUrl.and.returnValue(loginUrlTree);
    const result = TestBed.runInInjectionContext(() => authGuard());
    expect(router.parseUrl).toHaveBeenCalledWith('/login');
    expect(result).toBe(loginUrlTree);
  });
});

// guards/permission.guard.spec.ts
import { TestBed } from '@angular/core/testing';
import { Router, UrlTree, ActivatedRouteSnapshot } from '@angular/router';
import { permissionGuard } from './permission.guard';
import { PermissionService } from '../services/permission.service';
describe('permissionGuard', () => {
  let permissionService: jasmine.SpyObj<PermissionService>;
  let router: jasmine.SpyObj<Router>;
  beforeEach(() => {
    permissionService = jasmine.createSpyObj('PermissionService', ['hasPermission']);
    router = jasmine.createSpyObj('Router', ['parseUrl']);
    TestBed.configureTestingModule({
      providers: [
        { provide: PermissionService, useValue: permissionService },
        { provide: Router, useValue: router }
      ]
    });
  });
  it('should allow navigation when permission is granted', () => {
    permissionService.hasPermission.and.returnValue(true);
    const guard = permissionGuard('users:read');
    const result = TestBed.runInInjectionContext(() => 
      guard({} as ActivatedRouteSnapshot, {} as any)
    );
    expect(result).toBe(true);
  });
  it('should redirect when permission is denied', () => {
    permissionService.hasPermission.and.returnValue(false);
    const unauthorizedUrlTree = {} as UrlTree;
    router.parseUrl.and.returnValue(unauthorizedUrlTree);
    const guard = permissionGuard('users:read');
    const result = TestBed.runInInjectionContext(() => 
      guard({} as ActivatedRouteSnapshot, {} as any)
    );
    expect(router.parseUrl).toHaveBeenCalledWith('/unauthorized');
    expect(result).toBe(unauthorizedUrlTree);
  });
});

// guards/admin.guard.spec.ts
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { Router, UrlTree } from '@angular/router';
import { adminGuard } from './admin.guard';
import { PermissionService } from '../services/permission.service';
describe('adminGuard', () => {
  let permissionService: PermissionService;
  let router: jasmine.SpyObj<Router>;
  beforeEach(() => {
    router = jasmine.createSpyObj('Router', ['parseUrl']);
    TestBed.configureTestingModule({
      providers: [
        PermissionService,
        { provide: Router, useValue: router }
      ]
    });
    permissionService = TestBed.inject(PermissionService);
  });
  it('should allow navigation for admin users', () => {
    permissionService.setUser({
      id: '1',
      name: 'Admin User',
      roles: ['admin'],
      permissions: ['admin:access']
    });
    const result = TestBed.runInInjectionContext(() => adminGuard());
    expect(result).toBe(true);
  });
  it('should redirect non-admin users', () => {
    permissionService.setUser({
      id: '2',
      name: 'Regular User',
      roles: ['user'],
      permissions: ['users:read']
    });
    const unauthorizedUrlTree = {} as UrlTree;
    router.parseUrl.and.returnValue(unauthorizedUrlTree);
    const result = TestBed.runInInjectionContext(() => adminGuard());
    expect(router.parseUrl).toHaveBeenCalledWith('/unauthorized');
    expect(result).toBe(unauthorizedUrlTree);
  });
});

// ❌ Guard doing too much
export const badGuard: CanActivateFn = () => {
  const http = inject(HttpClient);
  const store = inject(Store);
  return http.get('/api/permissions').pipe(
    tap(perms => store.dispatch(setPermissions({ perms }))),
    map(perms => perms.includes('admin')),
    catchError(() => {
      store.dispatch(showError());
      return of(false);
    })
  );
};
// ✅ Guard stays focused
export const goodGuard: CanActivateFn = () => {
  const permissions = inject(PermissionService);
  return permissions.isAdmin(); // Service handles the complexity
};

// ❌ HTTP call in guard
export const apiGuard: CanActivateFn = () => {
  const http = inject(HttpClient);
  return http.get('/api/check-auth').pipe(map(() => true));
};
// ✅ Use cached service
export const cachedGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isAuthenticated(); // Already cached
};

// ❌ Imperative navigation
export const imperativeGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  if (!auth.isAuthenticated()) {
    router.navigate(['/login']); // Side effect!
    return false;
  }
  return true;
};
// ✅ Declarative UrlTree
export const declarativeGuard: CanActivateFn = (): boolean | UrlTree => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isAuthenticated() 
    ? true 
    : router.parseUrl('/login');
};

// ❌ Returning false without redirect
export const falseGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isAuthenticated(); // Returns false, user stays on current page
};
// ✅ Redirect to meaningful page
export const redirectGuard: CanActivateFn = (): boolean | UrlTree => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isAuthenticated() 
    ? true 
    : router.parseUrl('/login');
};

// ❌ Legacy class guard
@Injectable({ providedIn: 'root' })
export class OldGuard implements CanActivate {
  constructor(private auth: AuthService) {}
  canActivate() { return this.auth.isAuthenticated(); }
}
// ✅ Modern functional guard
export const modernGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isAuthenticated();
};

// ❌ Frontend-only "security"
export const insecureGuard: CanActivateFn = () => {
  return localStorage.getItem('role') === 'admin';
};
// ✅ Backend-validated
export const secureGuard: CanActivateFn = () => {
  const auth = inject(AuthService); // Validates with server
  return auth.isAuthenticated() && auth.hasRole('admin');
};

// Always test your guards!
// See "Testing Guards" section above for examples

App Shell
    ├── Auth Guard (global)
    ├── Feature Module A
    │       ├── Feature Guard
    │       ├── RBAC Guard
    │       └── Child Routes
    ├── Feature Module B
    │       ├── Feature Flag Guard
    │       └── Child Routes
    └── Admin Module
            ├── Admin Guard
            ├── RBAC Guard
            └── Child Routes