Guarding Routes in Angular

What You’ll Learn 📚

• Understanding route guarding in Angular
• Key terminology and concepts
• Simple and progressively complex examples
• Common questions and troubleshooting tips

Introduction to Route Guards

In Angular, route guards are used to control access to routes in your application. They allow you to define logic that determines whether a route can be activated or deactivated. This is crucial for protecting certain parts of your app, like admin dashboards or user profiles, from unauthorized access.

Key Terminology

• Route Guard: A service that implements specific interfaces to control navigation.
• CanActivate: Determines if a route can be activated.
• CanDeactivate: Determines if a route can be deactivated.
• CanLoad: Determines if a module can be loaded.

Getting Started: The Simplest Example

Let’s start with a basic example to see route guards in action. We’ll create a simple guard that prevents access to a route unless a condition is met.

// Step 1: Generate a guard using Angular CLI
// Run this command in your terminal
ng generate guard auth

// Step 2: Implement CanActivate interface
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    const isAuthenticated = false; // Change this to true to allow access
    return isAuthenticated;
  }
}

Progressively Complex Examples

Example 1: Using CanActivate with Authentication Service

// Assume we have an AuthService that manages authentication
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService) {}

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

Example 2: Using CanDeactivate

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

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

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

Example 3: Using CanLoad

import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root',
})
export class CanLoadGuard implements CanLoad {
  constructor(private authService: AuthService) {}

  canLoad(
    route: Route,
    segments: UrlSegment[]
  ): Observable | Promise | boolean {
    return this.authService.hasPermission();
  }
}

Common Questions and Answers

1. What is the purpose of route guards?

   Route guards protect routes by allowing or denying access based on specific conditions, enhancing security and user experience.

2. Can I use multiple guards on a single route?

   Yes, you can chain multiple guards together to create complex access logic.

3. How do I test route guards?

   You can write unit tests for route guards using Angular’s testing utilities to ensure they work as expected.

4. What happens if a guard returns false?

   If a guard returns false, the route transition is canceled, and the user remains on the current page.

Troubleshooting Common Issues

Ensure your guards are provided in the correct module and that they implement the necessary interfaces.

If a guard isn’t working as expected, check the console for errors and ensure all dependencies are correctly injected.

Practice Exercises

• Create a guard that only allows access to a route if the user has a specific role.
• Implement a CanDeactivate guard for a form component to warn users about unsaved changes.
• Experiment with chaining multiple guards on a single route.

For more information, check out the Angular Router documentation.