What are Route Guards in Angular?

Definition:
Route Guards are Angular services used to control navigation—they decide whether a user can access, leave, or load a route.

Think of them as security checkpoints for routes.

Why do we need Route Guards?

• Restrict access to authenticated users

• Prevent unauthorized users from accessing pages

• Protect sensitive routes (admin, dashboard)

• Avoid accidental navigation (unsaved form data)

Types of Route Guards (VERY IMPORTANT)

Angular provides 5 main guards:

1. CanActivate

✔ Controls if a route can be accessed

canActivate(): boolean {
  return this.authService.isLoggedIn();
}

Example: Allow access to dashboard only if logged in

2. CanActivateChild

✔ Controls access to child routes

canActivateChild(): boolean {
  return this.authService.isLoggedIn();
}

3. CanDeactivate

✔ Prevents leaving a route

canDeactivate(component: any): boolean {
  return component.hasUnsavedChanges ? confirm('Leave?') : true;
}

Example: Unsaved form warning

4. CanLoad

✔ Prevents lazy-loaded module from loading

canLoad(): boolean {
  return this.authService.isLoggedIn();
}

Improves security + performance

5. Resolve

✔ Fetches data before route loads

resolve(): Observable<any> {
  return this.apiService.getData();
}

Ensures data is ready before page loads

Auth Guard in Angular

Definition:
An Auth Guard is a specific implementation of Route Guard used to check whether a user is authenticated (logged in).

Usually implemented using CanActivate

Example Auth Guard

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean {
    const isLoggedIn = !!localStorage.getItem('token');

    if (!isLoggedIn) {
      this.router.navigate(['/login']);
      return false;
    }

    return true;
  }
}

Using Guard in Routing

const routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  }
];

Key Difference (IMPORTANT INTERVIEW QUESTION)

Feature	Route Guard	Auth Guard
Definition	Angular feature	Specific implementation
Purpose	Control navigation	Check authentication
Types	5 types available	Usually uses CanActivate
Usage	General (auth, data, exit)	Login-based access control

Simple answer:

• Route Guard = concept

• Auth Guard = use case (authentication)

Return Types of Guards (Common Question)

Guards can return:

boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>

✔ true → allow navigation
✔ false → block navigation
✔ UrlTree → redirect

Real-World Example (Interview Gold)

In your ATS system:

• AuthGuard → Only logged-in users can access dashboard

• RoleGuard → Only HR can access job posting

• CanDeactivate → Prevent leaving interview form with unsaved data

• Resolve → Load applicant data before page opens

Best Practices

• Keep guards lightweight (no heavy logic)

• Use services for business logic

• Combine guards (Auth + Role)

• Use CanLoad for lazy modules

Common Interview Questions

1. Difference between CanActivate and CanLoad?

• CanActivate → checks before navigating

• CanLoad → prevents module from even loading

2. Can guards call APIs?

✔ Yes (using Observable/Promise)

3. What happens if guard returns false?

✔ Navigation is cancelled

4. Can we use multiple guards?

✔ Yes:

canActivate: [AuthGuard, RoleGuard]

5. Are guards secure?

⚠️ Important answer:
❌ Guards are client-side only
✔ Real security must be implemented on backend

Final One-Line Summary

• Route Guards → control navigation

• Auth Guard → restrict access based on login