Gardes de route dans Angular

Cette leçon explique comment sécuriser les routes dans les applications Angular à l’aide de gardes de route.

Que sont les gardes de route ?

Les gardes de route contrôlent l’accès aux routes dans Angular. Ils sont utiles pour protéger les routes sensibles ou restreintes.

Types de gardes

• CanActivate : détermine si une route peut être activée.
• CanActivateChild : protège les routes enfants.
• CanDeactivate - vérifie les conditions avant de quitter une route.
• Résolution - récupère les données avant d’activer la route.

Créer une garde

Créez une garde à l’aide d’Angular CLI :

ng generate guard auth

Implémenter canActivate()

La méthode canActivate() contrôle l’accès à la route :

canActivate(): boolean {
  return true; // or false to block navigation
}

Utiliser des gardes dans les routes

Ajoutez des gardes aux routes dans votre module de routage :

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

Garde CanDeactivate

CanDeactivate empêche de quitter une route si certaines conditions ne sont pas remplies, ce qui est utile pour les formulaires :

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Garde de résolution

La garde Resolve récupère les données avant le chargement d’une route :

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

Résumé

Vous avez appris à sécuriser et à améliorer la navigation dans vos applications Angular grâce aux gardes de route. Continuez ainsi !