Ce framework robuste et polyvalent, apprécié des developpeurs, s’impose dans la création des Single Page Applications (SPAs). Mais que serait une SPA sans sécurité ?
C’est là que les Auth Guards entrent en jeu, offrant une panoplie de solutions pour garder les intrus à distance.
Sommaire
1. Qu’est-ce qu’un Auth Guard dans Angular ?
2. Protéger les routes avec les Auth Guards
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.