Route Guards in Angular: A Comprehensive Guide

Route guards in Angular are used to control access to routes based on specific conditions, such as authentication or authorization. They allow you to prevent unauthorized users from accessing certain parts of your application and ensure that data is loaded before navigating to a route. In this article, we’ll explore the different types of route guards in Angular, including CanActivate, CanActivateChild, CanDeactivate, and CanLoad. By the end of this guide, you’ll have a solid understanding of how to use route guards effectively in your Angular applications.

What are Route Guards?

Route guards are interfaces that Angular uses to determine whether a user can navigate to or from a route. They are implemented as services and can be used to enforce conditions like authentication, authorization, or data loading.

Types of Route Guards

Angular provides four types of route guards:

1. CanActivate: Controls access to a route.
2. CanActivateChild: Controls access to child routes.
3. CanDeactivate: Controls navigation away from a route.
4. CanLoad: Controls loading of lazy-loaded modules.

Implementing Route Guards

1. CanActivate

The CanActivate guard is used to control access to a route. It returns a boolean value or an observable that resolves to a boolean.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Add the guard to the route configuration:

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

2. CanActivateChild

The CanActivateChild guard is used to control access to child routes. It works similarly to CanActivate but applies to child routes.

import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthChildGuard implements CanActivateChild {
  constructor(private authService: AuthService, private router: Router) {}

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Add the guard to the route configuration:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivateChild: [AuthChildGuard] },
];

3. CanDeactivate

The CanDeactivate guard is used to control navigation away from a route. It is often used to prevent users from losing unsaved changes.

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { EditComponent } from './edit.component';

@Injectable({
  providedIn: 'root',
})
export class SaveChangesGuard implements CanDeactivate<EditComponent> {
  canDeactivate(
    component: EditComponent,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {
    if (component.hasUnsavedChanges()) {
      return confirm('Are you sure you want to leave?');
    }
    return true;
  }
}

Add the guard to the route configuration:

const routes: Routes = [
  { path: 'edit', component: EditComponent, canDeactivate: [SaveChangesGuard] },
];

4. CanLoad

The CanLoad guard is used to control the loading of lazy-loaded modules. It prevents unauthorized users from loading a module.

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

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

  canLoad(route: Route): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Add the guard to the route configuration:

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), canLoad: [AuthLoadGuard] },
];

Secrets and Hidden Facts

• Route Data: Use the data property to pass additional information to route guards.
• Multiple Guards: You can apply multiple guards to a single route.
• Custom Guards: Create custom guards to implement complex logic.

Conclusion

Route guards are a powerful tool for controlling access to routes in Angular applications. By understanding and implementing guards like CanActivate, CanActivateChild, CanDeactivate, and CanLoad, you can create secure and user-friendly applications. Whether you’re building a simple website or a complex enterprise solution, route guards are essential for Angular development.

So, start using route guards in your projects and unlock the full potential of Angular!