Route guards (canActivate, canDeactivate) in Angular

Introduction

Route guards help control if a user can enter or leave a page in an Angular app. They keep your app safe and user-friendly.

Prevent users from visiting a page if they are not logged in.

Ask users to confirm before leaving a form with unsaved changes.

Stop navigation to a page if certain conditions are not met.

Protect admin pages from unauthorized access.

Warn users about losing data when they try to leave a page.

Syntax

Angular

export class YourGuard implements CanActivate, CanDeactivate<YourComponent> {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    // return true to allow navigation
    // return false to block navigation
  }

  canDeactivate(
    component: YourComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): boolean | Observable<boolean> | Promise<boolean> {
    // return true to allow leaving the page
    // return false to prevent leaving
  }
}

canActivate runs before entering a route.

canDeactivate runs before leaving a route.

Examples

This guard allows navigation only if the user is logged in.

Angular

export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    return this.authService.isLoggedIn();
  }
}

This guard asks the user to confirm before leaving a form with unsaved changes.

Angular

export class ConfirmExitGuard implements CanDeactivate<FormComponent> {
  canDeactivate(component: FormComponent): boolean {
    if (component.hasUnsavedChanges()) {
      return confirm('You have unsaved changes. Leave anyway?');
    }
    return true;
  }
}

Sample Program

This example shows two guards: AuthGuard blocks access if not logged in, and ConfirmExitGuard asks for confirmation before leaving a form with unsaved changes.

Angular

import { Injectable } from '@angular/core';
import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => boolean | Observable<boolean> | Promise<boolean>;
}

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  isLoggedIn = false; // simulate login status

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    if (this.isLoggedIn) {
      return true;
    } else {
      alert('You must log in to access this page.');
      return false;
    }
  }
}

@Injectable({ providedIn: 'root' })
export class ConfirmExitGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate
  ): boolean | Observable<boolean> | Promise<boolean> {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

// Example component implementing canDeactivate
import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  template: `<h2>Form Page</h2><button (click)="save()">Save</button>`,
})
export class FormComponent implements CanComponentDeactivate {
  saved = false;

  save() {
    this.saved = true;
    alert('Form saved!');
  }

  canDeactivate(): boolean {
    if (!this.saved) {
      return confirm('You have unsaved changes. Leave anyway?');
    }
    return true;
  }
}

Important Notes

Guards must be provided in the Angular dependency injection system.

Use canActivate to protect routes before entering.

Use canDeactivate to warn users before leaving a page.

Summary

Route guards control navigation in Angular apps.

canActivate checks before entering a route.

canDeactivate checks before leaving a route.

Practice

1. What is the primary purpose of the canActivate guard in Angular routing?

easy

A. To handle errors during route navigation.

B. To check if navigation to a route is allowed before entering it.

C. To preload data before the route loads.

D. To confirm if navigation away from a route is allowed.

Solution

1. Step 1: Understand the role of canActivate

   canActivate is a route guard that runs before entering a route to decide if navigation is allowed.

2. Step 2: Differentiate from other guards

   canDeactivate checks leaving a route, not entering. Preloading and error handling are unrelated to canActivate.

3. Final Answer:

   To check if navigation to a route is allowed before entering it. -> Option B

4. Quick Check:

   canActivate = check before entering route [OK]

Hint: canActivate controls entering routes, canDeactivate controls leaving [OK]

Common Mistakes:

• Confusing canActivate with canDeactivate
• Thinking canActivate preloads data
• Assuming canActivate handles errors

2. Which of the following is the correct syntax to apply a canDeactivate guard to a route in Angular?

easy

A. { path: 'edit', component: EditComponent, canDeactivate: [UnsavedChangesGuard] }

B. { path: 'edit', component: EditComponent, canLoad: [LoadGuard] }

C. { path: 'edit', component: EditComponent, canActivate: [AuthGuard] }

D. { path: 'edit', component: EditComponent, canActivateChild: [ChildGuard] }

Solution

1. Step 1: Identify the guard type for leaving routes

   canDeactivate is used to check if navigation away from a route is allowed.

2. Step 2: Match syntax with canDeactivate

   The correct syntax uses canDeactivate: [GuardName] inside the route object.

3. Final Answer:

   { path: 'edit', component: EditComponent, canDeactivate: [UnsavedChangesGuard] } -> Option A

4. Quick Check:

   canDeactivate syntax = canDeactivate: [Guard] [OK]

Hint: Use canDeactivate: [Guard] to protect leaving a route [OK]

Common Mistakes:

• Using canActivate instead of canDeactivate for leaving routes
• Confusing canLoad with canDeactivate
• Missing brackets around guard name

3. Given this canDeactivate guard code snippet, what will happen when the user tries to leave the EditComponent with unsaved changes?

export class UnsavedChangesGuard implements CanDeactivate<EditComponent> {
  canDeactivate(component: EditComponent): boolean {
    if (component.hasUnsavedChanges()) {
      return confirm('You have unsaved changes. Leave anyway?');
    }
    return true;
  }
}

medium

A. The guard throws an error because confirm is not allowed.

B. The user is always allowed to leave without confirmation.

C. The user is blocked from leaving if there are unsaved changes.

D. The user is asked to confirm leaving only if there are unsaved changes.

Solution

1. Step 1: Analyze the guard logic

   The guard checks if component.hasUnsavedChanges() returns true, then asks for confirmation.

2. Step 2: Understand the confirm behavior

   If the user confirms, confirm() returns true allowing navigation; otherwise, navigation is blocked.

3. Final Answer:

   The user is asked to confirm leaving only if there are unsaved changes. -> Option D

4. Quick Check:

   canDeactivate confirms only if unsaved changes exist [OK]

Hint: canDeactivate can prompt user to confirm leaving [OK]

Common Mistakes:

• Assuming user can leave without confirmation always
• Thinking guard blocks leaving without prompt
• Believing confirm causes errors in Angular guards

4. Identify the error in this canActivate guard implementation:

export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.authService.isLoggedIn()) {
      return true;
    }
  }
}

medium

A. Missing return statement when user is not logged in.

B. Incorrect method name; should be canDeactivate.

C. The guard should return a Promise, not boolean.

D. The guard must not use services inside canActivate.

Solution

1. Step 1: Check all code paths return a value

   If isLoggedIn() is false, the method returns nothing (undefined), which is invalid.

2. Step 2: Understand guard return requirements

   canActivate must return true, false, or an observable/promise resolving to those. Missing return causes errors.

3. Final Answer:

   Missing return statement when user is not logged in. -> Option A

4. Quick Check:

   All canActivate paths must return true/false [OK]

Hint: Always return true or false in all canActivate paths [OK]

Common Mistakes:

• Not returning false or redirect when unauthorized
• Confusing canActivate with canDeactivate method names
• Thinking services can't be used in guards

5. You want to prevent users from leaving a form page if they have unsaved changes, but only if they are editing (not creating new). Which approach correctly uses canDeactivate to achieve this?

hard

A. Use canActivate guard to check unsaved changes before entering the form route.

B. Use canDeactivate guard that always returns true to allow navigation.

C. Use canDeactivate guard that checks component.isEditing and component.hasUnsavedChanges() before confirming navigation.

D. Use canActivateChild guard to block leaving the form.

Solution

1. Step 1: Identify when to block navigation away

   Blocking leaving only applies when editing and unsaved changes exist, so guard must check both conditions.

2. Step 2: Use canDeactivate guard properly

   canDeactivate runs when leaving a route, so it is the correct place to check and confirm navigation.

3. Final Answer:

   Use canDeactivate guard that checks component.isEditing and component.hasUnsavedChanges() before confirming navigation. -> Option C

4. Quick Check:

   canDeactivate with condition on editing and unsaved changes [OK]

Hint: Check editing and unsaved changes inside canDeactivate guard [OK]

Common Mistakes:

• Using canActivate to block leaving routes
• Always returning true in canDeactivate guard
• Confusing canActivateChild with canDeactivate