Angular Route Guards – Securing Navigation - Learn ANGULAR | Revochamp

Name: Angular Route Guards – Securing Navigation
Availability: InStock
Author: Revochamp

What are Route Guards?

Route guards are interfaces (or functions) that tell the Angular Router whether it should allow navigation to a requested route. As an Architect, you use guards to enforce business rules at the navigation level. For example, your Revochamp 'Admin' panel should only be accessible to users with an 'Admin' role, and the 'Editor' should warn users if they try to leave with unsaved code.

Types of Route Guards

Angular provides several types of guards, each triggered at a different point in the routing lifecycle.

CanActivate: Determines if a user can visit a route (e.g., Is the user logged in?).
CanActivateChild: Determines if a user can visit the child routes of a protected parent.
CanDeactivate: Determines if a user can leave a route (e.g., 'Warning: Unsaved Changes').
CanMatch: Determines if a route can be matched at all (useful for choosing between two different components for the same path based on a flag).

Implementing Functional Guards

In modern Angular (v15+), functional guards are the preferred standard over class-based guards. They are easier to write, test, and compose using Dependency Injection.

TypeScriptRead-only

// auth.guard.ts
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard = () => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  }

  // Redirect to login if not authenticated
  return router.parseUrl('/login');
};

// auth.guard.ts
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard = () => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  }

  // Redirect to login if not authenticated
  return router.parseUrl('/login');
};

Registering Guards in Routes

You apply guards directly to your route configuration. You can provide an array of multiple guards; all must return true for navigation to proceed.

TypeScriptRead-only

// app.routes.ts
export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component'),
    canActivate: [authGuard] // Guard applied here
  }
];

// app.routes.ts
export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component'),
    canActivate: [authGuard] // Guard applied here
  }
];

Guard Execution Flow

The router checks guards in a specific sequence before the component is even instantiated.

Guard Type	Primary Use Case	Return Value
CanActivate	Authentication / Login check	boolean \| UrlTree
CanDeactivate	Prevent accidental data loss	boolean \| Promise<boolean>
CanMatch	Feature flagging / Role-based routing	boolean
CanActivateChild	Protecting sub-menus/dashboards	boolean

Test Your Knowledge

of 3

Which guard type is used to prevent a user from accidentally navigating away from a form with unsaved changes?

CanActivate

CanDeactivate

CanMatch

CanLoad

of 3

What happens if a route guard returns 'false'?

The user is redirected to home

The application crashes

The navigation is cancelled and the user stays on the current page

The route is loaded but hidden

of 3

What is the benefit of functional guards over class-based guards?

They run faster in the browser

They require less boilerplate and are easier to use with the 'inject()' function

They are the only way to use the Router

They don't require TypeScript

Frequently Asked Questions

Can a guard return an Observable?

Yes. Guards can return a boolean, a UrlTree, a Promise, or an Observable. This is perfect for checking auth status against a backend API or a Firebase session.

What is a UrlTree return?

Instead of just returning 'false' (which cancels navigation), you can return a 'UrlTree' created by the router. This tells Angular to cancel the current navigation and immediately redirect the user to a different route (like /login).

Should I use Guards for Authorization?

Guards are great for UI-level security, but as a Lead, remember: Never rely on frontend guards alone. Always verify permissions on your Python/FastAPI backend, as frontend code can be bypassed by a determined user.

// auth.guard.ts import { inject } from '@angular/core'; import { Router } from '@angular/router'; import { AuthService } from './auth.service'; export const authGuard = () => { const authService = inject(AuthService); const router = inject(Router); if (authService.isLoggedIn()) { return true; } // Redirect to login if not authenticated return router.parseUrl('/login'); };

Guard Type

Primary Use Case

Return Value

CanActivate

Authentication / Login check

boolean | UrlTree

CanDeactivate

Prevent accidental data loss

boolean | Promise<boolean>

CanMatch

Feature flagging / Role-based routing

boolean

CanActivateChild

Protecting sub-menus/dashboards

boolean

Test Your Knowledge

of 3

Which guard type is used to prevent a user from accidentally navigating away from a form with unsaved changes?

CanActivate

CanDeactivate

CanMatch

CanLoad

of 3

What happens if a route guard returns 'false'?

The user is redirected to home

The application crashes

The navigation is cancelled and the user stays on the current page

The route is loaded but hidden

of 3

What is the benefit of functional guards over class-based guards?

They run faster in the browser

They require less boilerplate and are easier to use with the 'inject()' function

They are the only way to use the Router

They don't require TypeScript

Frequently Asked Questions

Can a guard return an Observable?

Yes. Guards can return a boolean, a UrlTree, a Promise, or an Observable. This is perfect for checking auth status against a backend API or a Firebase session.

What is a UrlTree return?

Should I use Guards for Authorization?

Angular Route Guards – Securing Navigation

Angular Route Guards – Securing Navigation

What are Route Guards?

Types of Route Guards

Implementing Functional Guards

Registering Guards in Routes

Guard Execution Flow

Test Your Knowledge

Frequently Asked Questions

Need help?

Angular Route Guards – Securing Navigation

Angular Route Guards – Securing Navigation

What are Route Guards?

Types of Route Guards

Implementing Functional Guards

Registering Guards in Routes

Guard Execution Flow

Test Your Knowledge

Frequently Asked Questions

Need help?