Sign in
Skip to solution
mediumFrontend

What are route guards in Angular?

1.0k views
01

Understand the problem

Explain guards and resolvers.

routingguards
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Guards control navigation: CanActivate/CanActivateChild (allow entry), CanDeactivate (confirm leaving), CanMatch (route matching). A Resolver pre-fetches data before a route activates so the component renders with data ready. Modern Angular uses functional guards/resolvers.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

A functional auth guard
import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const router = inject(Router);
  const loggedIn = !!localStorage.getItem('token');
  // allow, or redirect to /login via a UrlTree
  return loggedIn ? true : router.createUrlTree(['/login']);
};

// usage:
// { path: 'admin', component: AdminComponent, canActivate: [authGuard] }
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 18 of 121 decoded in the Angular track. One more won't hurt.

Back to track