What are route guards?

Question

IT Interview Practice · Accepted Answer

**Route guards** are functions that control **whether navigation to/from a route is allowed**. They run before a route activates (or before you leave one), enabling authentication checks, permission control, and "unsaved changes" prompts. ## The guard types ```text CanActivate → can the user enter this route? (auth/permission check) CanActivateChild → same, for child routes CanDeactivate → can the user LEAVE? ("you have unsaved changes") CanMatch → should this route even be matched? (feature flags, role-based) resolve → pre-fetch data BEFORE the route activates ``` ## A functional CanActivate guard (modern Angular) ```ts import { CanActivateFn, Router } from "@angular/router"; import { inject } from "@angular/core"; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; // allow navigation } return router.createUrlTree(["/login"]); // redirect to login }; ``` A guard returns `true` (allow), `false` (block), or a `UrlTree` (redirect). Modern Angular uses **functional guards** (plain functions with `inject()`) instead of the older class-based ones. ## Applying guards to routes ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // protect this route }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // only match for admins }, ]; ``` ## CanDeactivate — prevent accidental data loss ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` This classic guard warns users before navigating away from a form with unsaved edits. ## Guards can be async ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Why it matters Guards are the standard, centralized way to enforce access control and navigation rules in Angular — protecting authenticated routes, gating by role/permission, preventing data loss on exit, and pre-loading data (resolvers). Putting these checks in guards (rather than scattered in components) keeps security and navigation logic consistent and declarative; the `authGuard` on protected routes is something virtually every real Angular app implements.

The guard types

A functional CanActivate guard (modern Angular)

Applying guards to routes

CanDeactivate — prevent accidental data loss

Guards can be async

Why it matters

Related questions