CanActivate vs CanActivateChild avec des composants moins itinéraires

Question

Le angular2 documentation sur la Route des Gardes m'a laissé sait pas quand il est approprié d'utiliser un CanActivate gardes contre une CanActivateChild garde en combinaison avec des composants moins de routes.

TL;DR: quel est l'intérêt d'avoir canActivateChild quand je peux utiliser un composant-moins de routes avec des canActivate pour obtenir le même effet?

Version longue:

Nous pouvons avoir plusieurs gardes à tous les niveaux d'une hiérarchie de routage. L' routeur vérifie la CanDeactivate et CanActivateChild premiers gardes, du plus profond de l'enfant itinéraire vers le haut. Elle vérifie ensuite la CanActivate les gardes de haut en bas à la plus profonde de l'enfant de l'itinéraire.

Je reçois CanActivateChild est vérifié de bas en haut et de l' CanActivate est vérifié de haut en bas. Ce qui ne fait pas de sens pour moi, c'est l'exemple suivant de la doc:

@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 {}

Si l' admin chemin a une composante de moins de route:

En regardant nos enfants passent sous la AdminComponent, nous avons un itinéraire avec un chemin d'accès et une aire bien mais ce n'est pas à l'aide d'un 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 chez l'enfant et dans le composant racine (chemin de admin)? Ne pas se suffire de garde à la racine?

J'ai créé un plunkr basées sur l'exemple qui supprime l' canActivateChild: [AuthGuard] et ajoute un bouton de déconnexion sur l' AdminDashboard. Bien sûr, l' canActivate de la route parente garde encore, quel est l'intérêt d'en avoir canActivateChild quand je peux utiliser des composants moins les routes avec des canActivate?

Answer 1

À partir de la documentation:

Comme nous l'avons appris au sujet de la sécurisation d'itinéraires avec CanActivate, nous pouvons également assurer la protection des enfants les routes avec le CanActivateChild de la garde. Le CanActivateChild garde fonctionne de façon similaire à la CanActivate de la garde, mais la différence est de sa course avant chaque enfant de route est activée. Nous avons protégé notre admin fonctionnalité du module contre les accès non autorisés, mais on pourrait aussi protéger les enfants des routes à l'intérieur de nos modules.

Voici un exemple pratique:

1. en naviguant à l' /admin
2. canActivate est vérifié
3. Vous naviguez entre les enfants d' /admin route, mais canActivate n'est pas appelé parce qu'il protège /admin
4. canActivateChild est appelée à chaque changement entre les enfants de la route à la définition de sa sur.

J'espère que cela vous aide, si c'est toujours pas clair, vous pouvez vérifier la fonctionnalité en ajoutant des gardes leur débogage.

Answer 2

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 avez rôles pour les utilisateurs admin (Edit/View), vous pouvez ajouter un gardien pour "Modifier" uniquement 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 }
            ]
          }
        ]
      }
    ])

Answer 3

J'ai aussi confondu le angular2 de la documentation sur routeGuard. quelle est la différence entre le CanActivate de la garde et CanActivateChild de la garde.

J'ai quelques résultats,j'espère que cela va vous aider.

dans l' 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 l' canActivate méthode est appelée dans l' canActivateChild fonction. vous pouvez écrire un bout de code qui n'appellent pas l' canActivate méthode canActivateChild fonction.

Answer 4

Une raison pour laquelle je peux penser à est de délais d'attente.

Je commence à travailler avec Angulaire 2, à l'aide d'un fournisseur d'authentification. Ce fournisseur d'expiration d'une session qui a été inactif pendant plus d'une certaine quantité de 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 l'enfant routes, je pense que CanActivateChild est le de garde qui permet de détecter l'expiration de session, et de déclencher une redirection de connexion, tout en CanActivate ne se déclenche pas.

Avertissement: Ceci est venu à partir du haut de ma tête, je ne l'ai pas encore mise en oeuvre.