CanActivate vs. CanActivateChild avec des routes sans composants
la documentation angular2 sur Gardes De La Route m'a laissé sait pas quand il est approprié d'utiliser un CanActivate gardes contre un CanActivateChild guard en combinaison avec des routes sans composants.
TL;DR: à quoi bon avoir canActivateChild quand je peux utiliser des routes sans composants avec canActivate pour obtenir le même effet?
version longue:
On peut avoir plusieurs gardes à chaque niveau du routage hiérarchie. Le le routeur vérifie D'abord les garde CanDeactivate et CanActivateChild, du plus profond de l'enfant itinéraire vers le haut. Puis il vérifie le CanActivate des gardes du haut jusqu'au plus profond de la route des enfants.
je CanActivateChild est cochée, de bas en haut et CanActivate est coché haut vers le bas. Ce qui n'a pas de sens pour moi est l'exemple suivant donné dans le docs:
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
]
}
])
],
exports: [
RouterModule
]
})
export class AdminRoutingModule {}
admin le chemin a une route sans composante:
en regardant notre route enfant sous le Component Admin, nous avons une route avec un chemin et une propriété pour enfants mais il n'utilise pas de Composant. Nous n'avez pas fait une erreur dans notre configuration, parce que nous pouvons utiliser un composant de moins en moins la route.
Pourquoi le code dans ce cas, l'insertion de l' AuthGuard dans l'enfant et dans le composant racine (chemin d'accès admin)? Ne suffirait-il pas à garder la racine?
j'ai créé un plunkr basé sur le exemple qui supprime le canActivateChild: [AuthGuard] et ajoute un bouton de déconnexion sur le AdminDashboard. Bien sûr, le canActivate de la route de parent garde toujours, alors à quoi bon avoir canActivateChild quand je peux utiliser des routes sans composants avec <!--4?
4 réponses
comme nous avons appris à garder les routes avec CanActivate, nous pouvons aussi protéger les routes d'enfants avec le canactivatechild guard. La garde CanActivateChild fonctionne de la même manière que la garde CanActivate, mais la différence est son exécution avant chaque voie d'enfant est activée. Nous avons protégé notre module de fonctionnalité admin de l'accès non autorisé, mais nous pourrions aussi protéger les itinéraires pour enfants dans notre fonctionnalité module.
Voici un exemple concret:
- navigation
/admin canActivateest cochée- Vous naviguez entre les enfants de
/adminroute, maiscanActivaten'est pas appelé parce qu'il protège/admin canActivateChildest appelé à chaque changement entre les enfants de la route son définie sur.
j'espère que cela vous aide, si toujours pas clair, vous pouvez vérifier les fonctionnalités spécifiques par l'ajout de gardes de débogage.
Dans le monde réel, je pense qu'il est superflu d'utiliser la même garde pour les parents et tous ses enfants.
pour un meilleur exemple, supposons que vous ayez des rôles pour les utilisateurs admin (Edit/View), vous pouvez ajouter un guard pour "Edit" seulement les onglets.
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard], //1 - redirect to login page if not logged in
children: [
//View Access
{
......
},
//Edit Access
{
path: '',
canActivateChild: [EditGuard], //2 - display "you don't have Edit permission to access this page"
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
]
}
])
j'ai aussi confondu la documentation de l'angular2 sur routeGuard.
quelle est la différence entre CanActivate garde et
CanActivateChild garde.
j'ai quelques résultats,j'espère que cela va vous aider.
dans le auth-guard.service.ts le fichier
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
return this.checkLogin(url);
}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.canActivate(route, state);
}
parce que le canActivate méthode est appelée dans le canActivateChild fonction. vous pouvez écrire un morceau de code qui n'appelle pas canActivate méthode canActivateChild fonction.
Une seule raison pour laquelle je peux penser à est de délais d'attente.
je commence à travailler avec Angular 2, en utilisant un fournisseur d'authentification. Ce fournisseur expire une session qui est inactive depuis plus d'un certain temps.
Dans une situation où vous laissez votre ordinateur connecté et votre session expire, la navigation suivante vous essayez DEVEZ valider votre situation actuelle. Si vous naviguez entre des routes d'enfant, je pense CanActivateChild est le gardien qui sera détecte la session expirée, et déclenche une redirection vers login, alors que CanActivate ne se déclenche pas.
Avertissement: c'est venu du haut de ma tête, Je ne l'ai pas encore implémenté.