Angular

Appearance

Comment utiliser CanActivateChild sur Angular ? ​

Voici un exemple de fonction :

ts
import { inject } from "@angular/core";
import { Router } from "@angular/router";

export const CanActivateChildGuard = () => {
    return true
}
import { inject } from "@angular/core";
import { Router } from "@angular/router";

export const CanActivateChildGuard = () => {
    return true
}

Voici un exemple de configuration de route qui utilise CanActivateChild :

ts
const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    canActivate: [AuthGuard], // Vérifie si l'utilisateur est authentifié avant de lui permettre d'accéder à la route parent
    canActivateChild: [CanActivateChildGuard], // Vérifie si l'enfant de la route peut être activé
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    canActivate: [AuthGuard], // Vérifie si l'utilisateur est authentifié avant de lui permettre d'accéder à la route parent
    canActivateChild: [CanActivateChildGuard], // Vérifie si l'enfant de la route peut être activé
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
];

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

Dans cet exemple, le AuthGuard est utilisé pour vérifier si l'utilisateur est authentifié avant de lui permettre d'accéder à la route parent, tandis que le CanActivateChildGuard est utilisé pour vérifier si l'enfant de la route peut être activé.