typescript 49 lines · 5 steps

Functional route guards in Angular

Two CanActivateFn guards gate routes on auth state and user roles, redirecting via UrlTree when access is denied.

Explained by highlit
Angular Intermediate route-guards dependency-injection observables higher-order-functions authorization
1import { inject } from '@angular/core';
2import {
3 CanActivateFn,
4 Router,
5 ActivatedRouteSnapshot,
6 RouterStateSnapshot,
7} from '@angular/router';
8import { map, take } from 'rxjs/operators';
9 
10import { AuthService } from '../services/auth.service';
11 
12export const authGuard: CanActivateFn = (
13 route: ActivatedRouteSnapshot,
14 state: RouterStateSnapshot,
15) => {
16 const auth = inject(AuthService);
17 const router = inject(Router);
18 
19 return auth.isAuthenticated$.pipe(
20 take(1),
21 map((isAuthenticated) => {
22 if (isAuthenticated) {
23 return true;
24 }
25 
26 return router.createUrlTree(['/login'], {
27 queryParams: { returnUrl: state.url },
28 });
29 }),
30 );
31};
32 
33export const roleGuard = (...allowedRoles: string[]): CanActivateFn => {
34 return () => {
35 const auth = inject(AuthService);
36 const router = inject(Router);
37 
38 return auth.currentUser$.pipe(
39 take(1),
40 map((user) => {
41 if (user && allowedRoles.includes(user.role)) {
42 return true;
43 }
44 
45 return router.createUrlTree(['/forbidden']);
46 }),
47 );
48 };
49};
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Functional guards use inject() to grab dependencies without a class or constructor.
  2. 2Returning a UrlTree from a guard performs a redirect instead of a plain block.
  3. 3Wrapping a guard in a factory lets you parameterize it, like passing allowed roles.

Related explainers

typescript 
type User = {
  id: number;
  email: string;
  roles: string[];

Validating API data with TypeScript type guards

type-guards runtime-validation type-narrowing
Intermediate 8 steps
php 
<?php
 
final class UserRepository
{

A safe PDO user repository in PHP

prepared-statements repository-pattern sql-injection
Intermediate 7 steps
java 
@RestController
@RequestMapping("/api/users")
public class UserController {
 

How a Spring REST controller maps users

rest-api dependency-injection dto-mapping
Intermediate 7 steps
typescript 
import {
  createParamDecorator,
  ExecutionContext,
  UnauthorizedException,

Building a @CurrentUser decorator in NestJS

decorators authentication request-context
Intermediate 6 steps
java 
@Service
public class ReportGenerationService {
 
    private final ReportRepository reportRepository;

Async report generation with Spring @Async

async dependency-injection completablefuture
Intermediate 7 steps
typescript 
import {
  CanActivate,
  ExecutionContext,
  Injectable,

Role-based route guards in NestJS

authorization decorators metadata-reflection
Intermediate 8 steps

Share this explainer

Here's the card — post it anywhere.

Functional route guards in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code