Angular
Angular Routing

Route Guards (Protéger les pages)

Les Route Guards (Gardiens de route) permettent de bloquer ou d'autoriser l'accès à certaines pages de votre application. Par exemple, interdire l'accès à la page "Profil" si l'utilisateur n'est pas connecté.

Exemple : Bloquer les non-connectés

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

export const authGuard: CanActivateFn = () => {
  const router = inject(Router);
  
  // Vérification basique (simulée ici par le token en local storage)
  const isLoggedIn = localStorage.getItem('token') !== null;

  if (isLoggedIn) {
    return true; // Autorise l'accès à la page
  } else {
    router.navigate(['/login']); // Redirige vers la connexion
    return false; // Bloque l'accès
  }
};

Comment ça fonctionne ?

1. Générer le Guard

Angular propose une commande CLI pour créer rapidement la structure de votre Guard.

ng generate guard guards/auth

Choisissez "CanActivate" quand on vous demande quel type de guard vous voulez créer.

2. La logique du Guard (Vrai ou Faux)

Un Guard moderne est une simple fonction (CanActivateFn) qui doit retourner :

  • true : L'utilisateur a le droit d'entrer sur la page.
  • false : L'accès est refusé (dans ce cas, on le redirige souvent vers une page de connexion grâce au Router).

3. Protéger la Route

Dans votre fichier app.routes.ts, il suffit d'ajouter la propriété canActivate: [authGuard] sur la route que vous souhaitez verrouiller. Vous pouvez même mettre plusieurs Guards à la suite dans ce tableau !