39. Protéger les routes filles (CanActivateChild)

Lors de l'utilisation du routage imbriqué, nous voulons souvent protéger toutes les routes filles sous une route parente (ex : toutes les routes sous /admin). CanActivateChild nous permet d'appliquer un guard unique à toute une section de l'application.

Routes imbriquées

Nous définissons des routes filles dans le tableau children d'une définition de route parente. Le composant parent (AdminComponent) doit contenir un <router-outlet> pour que les enfants s'affichent.

typescript const routes: Routes = [ { path: 'admin', component: AdminComponent, // Ce composant sert de conteneur canActivate: [AdminGuard], // Protège l'accès à l'AdminComponent lui-même canActivateChild: [AdminGuard], // Protège l'accès à tous les enfants children: [ { path: 'users', component: UserManagementComponent }, { path: 'settings', component: SettingsComponent } ] } ];

Implémentation de CanActivateChild

Le guard implémente CanActivateChild (en plus ou à la place de CanActivate). La logique est généralement la même : vérifier l'autorisation.

typescript // admin.guard.ts import { CanActivate, CanActivateChild, ... }

@Injectable({ providedIn: 'root' }) export class AdminGuard implements CanActivate, CanActivateChild {

// Vérifie l'accès pour la route parente canActivate(...) { /* logique de vérification */ return true; }

// Vérifie l'accès pour n'importe quelle route fille (ex : /admin/users) canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { // On peut utiliser le snapshot de la route pour vérifier des permissions spécifiques console.log(Vérification de la route fille : ${childRoute.url}); return this.authService.isAdmin(); } }

Ceci garantit que si l'utilisateur n'a pas les privilèges administratifs nécessaires, il ne peut accéder ni à /admin, ni à /admin/users, ni à /admin/settings.