37. Route Guards : CanActivate (Autorisation)

Les Route Guards sont des interfaces utilisées pour contrôler l'accès à la navigation en fonction de conditions spécifiques (ex : utilisateur connecté, droits d'administrateur). CanActivate détermine si un utilisateur peut entrer sur une route.

1. Créer le Guard

Un guard est un service injectable qui implémente l'interface CanActivate.

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

@Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate {

constructor(private authService: AuthService, private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean { if (this.authService.isLoggedIn()) { return true; // Autoriser l'accès } else { // Rediriger les utilisateurs non autorisés vers la page de connexion this.router.navigate(['/login']); return false; // Bloquer l'accès } } }

2. Appliquer le Guard à une route

Appliquez le guard à l'aide de la propriété canActivate (tableau) dans la configuration de la route.

typescript import { AuthGuard } from './auth.guard'; import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [ { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] // Le guard est vérifié avant le chargement du composant }, { path: 'login', component: LoginComponent } ];

Si la méthode AuthGuard.canActivate() renvoie true, la navigation se poursuit. Si elle renvoie false, la navigation est annulée (et dans notre exemple, l'utilisateur est redirigé).