DEV Community

Cover image for Guard dans Angular
David BILONGO
David BILONGO

Posted on

Guard dans Angular

Image description

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;
  }
};
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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】.

Top comments (2)

Collapse
 
alexmustiere profile image
Alex Mustiere

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

Collapse
 
bilongodavid profile image
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 !