Angular Academy · Leçon

Garde-fous fonctionnels de route

Protégez les routes avec des garde-fous fonctionnels

Garde-fous fonctionnels de route est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Que sont les gardes de route

Les gardes déterminent si la navigation peut continuer : ils protègent les routes par une authentification, demandent une confirmation avant de quitter un formulaire ou restreignent l'accès selon le rôle. Angular moderne utilise des gardes fonctionnels — de simples fonctions, sans classes.

CanActivateFn

Un CanActivateFn renvoie true pour autoriser la navigation, false pour la bloquer, un UrlTree pour rediriger, ou un observable ou une promesse contenant l'une de ces valeurs.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

Associer un guard à une route

Associez des guards avec canActivate (un tableau, ce qui permet d’en empiler plusieurs).

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

Rediriger avec UrlTree

Renvoyer un UrlTree (depuis router.createUrlTree ou parseUrl) bloque et redirige en une seule étape.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

Guards asynchrones

Les guards peuvent renvoyer un observable : le routeur attend la première valeur, puis termine.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

Accéder aux informations de la route dans un guard

Une CanActivateFn reçoit ActivatedRouteSnapshot et RouterStateSnapshot, ce qui permet de lire les paramètres, les données et l’URL tentée.

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

Guards canMatch

CanMatchFn détermine si une définition de route correspond réellement — pratique pour changer de route selon un indicateur de fonctionnalité ou effectuer un chargement différé uniquement lorsque cela est autorisé.

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

Guards canDeactivate

CanDeactivateFn s’exécute lorsque vous quittez une route — idéal pour demander confirmation en cas de modifications non enregistrées. Il reçoit l’instance du composant.

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

Empiler plusieurs guards

Tous les guards du tableau doivent autoriser la navigation. Ils s’exécutent ensemble ; si l’un d’eux renvoie false ou un UrlTree, la navigation est bloquée ou redirigée.

canActivate: [authGuard, roleGuard]
// both must pass

Pourquoi préférer les guards fonctionnels aux guards basés sur des classes

Les guards fonctionnels sont plus simples : pas de code passe-partout @Injectable, utilisation facile de inject(), composition aisée et suppression par l’optimiseur lorsque cela est possible. Les interfaces CanActivate basées sur des classes sont obsolètes.

Guards et routes enfants

canActivateChild protège toutes les routes enfants d’un parent en un seul endroit, ce qui évite de répéter le guard sur chaque enfant.

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

Vérification rapide

Vérifiez votre compréhension des guards fonctionnels.

Récapitulatif : guards fonctionnels de routes

Les guards fonctionnels contrôlent la navigation à l’aide de simples fonctions.

CanActivateFn : autoriser, bloquer ou rediriger (UrlTree).
CanMatchFn : déterminer si une route correspond.
CanDeactivateFn : confirmer la sortie.
Utilisez inject() pour les services et empilez les guards dans des tableaux.

Ensuite : les événements du routeur et la navigation.

Questions Fréquemment Posées

La leçon « Garde-fous fonctionnels de route » est-elle gratuite ?

Oui — le texte complet de « Garde-fous fonctionnels de route » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Garde-fous fonctionnels de route » ?

Protégez les routes avec des garde-fous fonctionnels Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Garde-fous fonctionnels de route » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Paramètres de route et paramètres de requête
Résolveurs et données de route
Garde-fous fonctionnels de route
Événements du routeur et navigation

← Retour à Angular Academy