Que sont les route guards ?

Question

Accepted Answer

**Route guards** sont des fonctions qui contrôlent **si la navigation vers/depuis une route est autorisée**. Elles s'exécutent avant l'activation d'une route (ou avant de la quitter), permettant les vérifications d'authentification, le contrôle des permissions et les invites « modifications non enregistrées ». ## Les types de guard ```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 ``` ## Un garde CanActivate fonctionnel (Angular moderne) ```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 }; ``` Un guard retourne `true` (autoriser), `false` (bloquer) ou un `UrlTree` (rediriger). Angular moderne utilise **des guards fonctionnels** (des fonctions simples avec `inject()`) au lieu des anciens guards basés sur les classes. ## Application de guards aux 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 — prévenir la perte accidentelle de données ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Ce guard classique avertit les utilisateurs avant de naviguer loin d'un formulaire avec des modifications non enregistrées. ## Les guards peuvent être asynchrones ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Pourquoi c'est important Les guards sont le moyen standard et centralisé pour appliquer le contrôle d'accès et les règles de navigation dans Angular — protéger les routes authentifiées, restreindre par rôle/permission, prévenir la perte de données à la sortie et pré-charger les données (resolvers). Mettre ces vérifications dans les guards (plutôt que dispersées dans les composants) garde la sécurité et la logique de navigation cohérentes et déclaratives ; le `authGuard` sur les routes protégées est quelque chose que pratiquement chaque application Angular réelle implémente.