Guard dans Angular

Introduction

Dans cet article, nous allons explorer comment utiliser les gardes (guards) avec Angular 17. Les gardes permettent de protéger les routes et de vérifier certaines conditions avant de permettre l'accès à une route spécifique.

Qu'est-ce qu'un Garde Fonctionnel ?

Un garde fonctionnel dans Angular est une fonction utilisée pour intercepter et potentiellement bloquer la navigation vers une route. Avec Angular 17, vous utilisez CanActivateFn pour créer des gardes fonctionnels.

Exemple de Code

Voici un exemple de garde fonctionnel authGuard :

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  } else {
    router.navigate(['/login']);
    return false;
  }
};

Utilisation du Garde

Pour utiliser ce garde, vous devez le configurer dans votre module de routage en utilisant provideRouter et withGuards :

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withGuards } from '@angular/router';
import { AppComponent } from './app/app.component';
import { authGuard } from './app/guards/auth.guard';

const routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [authGuard] }
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withGuards())
  ]
}).catch(err => console.error(err));

Explication du Code

• CanActivateFn : Un type représentant une fonction de garde.
• inject : Fonction pour injecter des dépendances comme des services.
• Router : Service de routage pour naviguer vers d'autres routes.
• authGuard : Fonction de garde vérifiant si l'utilisateur est authentifié.

Conclusion

Les gardes fonctionnels dans Angular 17 offrent une manière flexible et puissante de protéger les routes et de gérer les autorisations. Ils sont particulièrement utiles pour des tâches telles que l'authentification et le contrôle d'accès.

Pour plus de détails, consultez la documentation officielle d'Angular sur les gardes【20†source】【22†source】【23†source】.

Comments

[Alex Mustiere]

Euh, il ne manquerait pas la partie où on déclare le "guard" sur la ou les routes concernées ?

[David BILONGO]

Bonjour Alex
Merci pour votre remarque ! En effet, il est essentiel de montrer comment déclarer le guard sur les routes concernées. Cette partie est incluse dans la section "Utilisation du Garde" de mon article. Merci encore pour votre retour !