Guide sur les Auth Guards d’Angular

Sommaire

1. Qu’est-ce qu’un Auth Guard dans Angular ?

2. Protéger les routes avec les Auth Guards

3. Mise en pratique

4. Bénéfices des Auth Guards

5. Conclusion

Avant de se lancer

Nous vous proposons deux formations : formation Angular et formation Angular Avancé, pour les plus aguerris, Apprendrez à développer des applications Web interactives écrites en TypeScript, à créer vos propres composants réutilisables et à maitriser les différentes facettes de la technologie.

L’équipe Ambient IT

Qu’est-ce qu’un Auth Guard dans Angular ?

Les Auth Guards ou gardiens d’authentification, sont les remparts qui protègent les routes de votre application Angular. Imaginez plusieurs cerbères qui vérifient l’identité de chaque utilisateur voulant accéder à une route. Si l’utilisateur dispose des droits, la porte s’ouvre. Au cas contraire, il est redirigé vers une page de connexion ou ailleurs, loin des contenus sensibles. Ces gardiens sont essentiels pour maintenir la sécurité et l’intégrité de l’application.

Protéger les routes avec les Auth Guards

Ils existent différents types de Auth Guards disponibles. Ils sont au nombre de 4 :

• CanActivate
• CanActivateChild
• CanLoad
• CanDeactivate

CanActivate

CanActivate, c’est le garde du corps des routes Angular. Il détermine si l’accès à une route est autorisé. Il répond par oui ou par non, cependant, pour les plus indécis, il peut répondre par une promesse ou un observable qui se résout en un booléen.

Cas d’utilisation

• Vérifier si un utilisateur est authentifié avant d’autoriser l’accès à un itinéraire
• Vérifier si un utilisateur dispose de rôles ou d’autorisations spécifiques requis pour un itinéraire particulier

CanActivateChild

CanActivateChild, c’est le même principe que CanActivate, mais comme son nom l’indique, il concerne « les enfants ». Ce ne sont pas les enfants de la garderie, mais plutôt des routes enfants dans Angular. Si vous avez une route parent qui a des petits, CanActivateChild s’assure que toute la famille suit les mêmes règles d’accès.

Cas d’utilisation :

• Protéger des sections ou des fonctionnalités spécifiques au sein d’un itinéraire parent

CanLoad

CanLoad joue un rôle stratégique avec les modules chargés à la demande (lazy-loaded). Il vérifie si un utilisateur peut charger le module en question. En d’autres termes, pas de passe-droit pour les modules si l’utilisateur n’est pas authentifié.

Cas d’utilisation :

• Retarder le chargement des modules de fonctionnalités jusqu’à ce qu’un utilisateur soit authentifié
• Chargement de modules en fonction des rôles ou des autorisations des utilisateurs

CanDeactivate

CanDeactivate, c’est le gardien de la sortie. Il s’assure que vous avez bouclé tout ce que vous aviez à faire avant de quitter une route. Cela est pratique pour éviter de perdre des données non sauvegardées ou pour poser un dernier quiz de sortie à l’utilisateur.

Cas d’utilisation :

• Confirmer si un utilisateur souhaite quitter un formulaire sans enregistrer les modifications
• Empêcher la navigation accidentelle hors d’une page contenant des données non enregistrées

Comment créer un Auth Guard personnalisé ?

Il est possible de créer un Auth Guard personnalisé, pour cela, il va falloir utiliser tous ses neurones et plonger dans le TypeScript. Un Auth Guard, c’est un service qui est injecté dans le système de routing d’Angular. Une logique d’authentification est définie et le choix du sort des utilisateurs tentants d’accéder à nos routes protégées est décidé.

Mise en pratique

Étape 1 : Créer une nouvelle application angular

ng new your-app-name

Étape 2 : Créer un Auth guard

ng generate guard auth

Étape – 3 : Créer un service d’authentification

ng generate service auth

Dans ce service, implémentez une méthode pour vérifier le statut d’authentification de l’utilisateur. Comme dans l’exemple suivant :

// auth.service.ts
import { Injectable } from "@angular/core";

@Injectable({
   providedIn: "root",
})
export class AuthService {
   isAuthenticated = false; // You can set this based on your authentication logic

   constructor() {}

   // Example: Check if the user is authenticated
   checkAuthentication(): boolean {
      return this.isAuthenticated;
   }
}

Étape – 4 : implémenter Auth Guard

// auth.guard.ts
import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { AuthService } from "./auth.service";

@Injectable({
   providedIn: "root",
})
export class AuthGuard implements CanActivate {
   constructor(private authService: AuthService, private router: Router) {}

   canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      // Check if the user is authenticated
      if (this.authService.checkAuthentication()) {
         return true; // User is authenticated, allow access
      } else {
         // User is not authenticated, redirect to the login page or another route
         this.router.navigate(["/login"]); // Adjust the route as needed
         return false;
      }
   }
}

Étape – 5 : Appliquer l’Auth Guard aux routes

Dans la configuration de routage de votre application (généralement trouvée dans app-routing.module.ts ), appliquez AuthGuard à des routes spécifiques à l’aide de la propriété canActivate :

// app-routing.module.ts
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { AuthGuard } from "./auth.guard";
import { DashboardComponent } from "./dashboard/dashboard.component";

const routes: Routes = [
   {
      path: "dashboard",
      component: DashboardComponent,
      canActivate: [AuthGuard], // Apply AuthGuard to the '/dashboard' route
   },
   // Add other routes here
];

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
})
export class AppRoutingModule {}

Comme on peut le voir, AuthGuard est appliqué à la route /dashboard, ce qui garantit que seuls les utilisateurs authentifiés peuvent y accéder. Vous pouvez appliquer AuthGuard à d’autres itinéraires selon vos besoins.

Étape – 6 : Protéger les autres routes

Vous pouvez suivre un processus similaire pour protéger d’autres routes en appliquant AuthGuard à ces routes dans la configuration de routage. Les utilisateurs qui ne sont pas authentifiés seront redirigés vers la page de connexion ou un autre itinéraire spécifié.

Bénéfices des Auth Guards

Interaction et dépendances

• Gère efficacement les asynchrones
• Création de chaîne de protection

Gestion des accès et des redirections

• Rediriger les utilisateurs qui n’ont pas l’accès
• Possibilité de donner des informations supplémentaires
• Protection des chemins d’accès

Performance et Lazy Loading

• Optimisation des performances
• Chargement que si nécessaire (Lazy Loading)

Stratégies de sécurité complexes

• Combiner les Auth Guards

Tests et bonnes pratiques

• Utilisation de protocoles sécurisés
• Stockage de mots de passe

Gestion des erreurs et des validations

• Anticipation des erreurs

Conclusion

En résumé, les Auth Guards sont des éléments vitaux pour la sécurité de vos SPAs Angular. Ils offrent la flexibilité, la sécurité et la performance dont vous avez besoin pour construire des applications web modernes et sécurisées.

Sans ces gardes du corps, vos SPAs seraient comme des coffres-forts sans cadenas. Ils sont essentiels pour les garder à l’abri des regards indiscrets. Avec eux, vous pouvez dormir sur vos deux oreilles, en sachant que votre application est bien sécurisée.