Différence entre canLoad et canActivate dans Angular ?

Question

Quelle est la différence entre canLoad y canActivate ?

export interface Route {
  path?: string;
  pathMatch?: string;
  matcher?: UrlMatcher;
  component?: Type<any>;
  redirectTo?: string;
  outlet?: string;
  canActivate?: any[];
  canActivateChild?: any[];
  canDeactivate?: any[];
  canLoad?: any[];
  data?: Data;
  resolve?: ResolveData;
  children?: Routes;
  loadChildren?: LoadChildren;
}

Quand je devrais choisir l'un d'entre eux ?

Answer 1

peutActiver est utilisé pour empêcher les utilisateurs non autorisés d'accéder à certaines routes. Voir docs pour plus d'informations.

canLoad est utilisé pour empêcher l'application de charger des modules entiers paresseusement si l'utilisateur n'est pas autorisé à le faire.

Voir docs et l'exemple ci-dessous pour plus d'informations.

{
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AuthGuard]
},

Avec ce code, le code pour l'AdminModule ne sera chargé dans l'application que si AuthGuard retourne true .

Si l'utilisateur n'est pas autorisé à accéder à cette route, et que nous avions seulement utilisé une canActivate garde, le AdminModule sera chargé, même si l'utilisateur ne pourra pas accéder à cette route.

Answer 2

• CanActivate - Décide si une route peut être activée, cette garde peut ne pas être la meilleure solution pour les modules de fonctionnalités qui sont chargés paresseusement, car cette garde chargera toujours le module en mémoire, même si la garde renvoie false ce qui signifie que l'utilisateur n'est pas autorisé à accéder à la route.
• CanLoad - Décide si un module peut être chargé paresseusement, contrôle si une route peut même être chargée. Cela devient utile pour les modules de fonctionnalités qui sont chargés paresseusement. Ils ne seront même pas chargés si le gardien renvoie false.

C'est un test que j'ai fait sur les deux gardes avec un module de fonctionnalité qui est chargé paresseusement :

1. Test de garde CanActivate

vous remarquerez au bas de la page du réseau qu'il a effectué 24 requêtes d'une taille de 9,5 Mo transférées en 3,34 secondes et entièrement chargées en 3,47 secondes.

1. Test de garde CanLoad

Vous verrez ici la grande différence lorsque nous avons utilisé CanLoad Guard : le navigateur n'a fait que 18 requêtes d'une taille de 9,2 Mo, transférées en 2,64 secondes et entièrement chargées en 2,59 secondes.

CanLoad Guard ne charge jamais les données du module si l'utilisateur n'est pas autorisé et cela vous donne plus de performance car le temps de chargement a diminué de presque 1 seconde et c'est un temps énorme dans le chargement des pages web, sans doute cela dépend de la taille du module.

Conseil : si vous voulez faire le test sur votre projet, assurez-vous que Disable Cache la case à cocher dans l'onglet réseau est cochée, c'est marqué dans la première image

Answer 3

El CanLoad Le garde empêche le chargement du module "Lazy Loaded". Nous utilisons généralement ce garde lorsque nous ne voulons pas qu'un utilisateur non autorisé puisse naviguer vers l'une des routes du module et qu'il ne puisse même pas voir le code source du module.

L'Angular fournit peutActiver Guard, qui empêche un utilisateur non autorisé d'accéder à l'itinéraire. Mais il n'empêche pas le téléchargement du module. L'utilisateur peut utiliser la console du développeur de chrome pour voir le code source. Le CanLoad Guard empêche le module d'être téléchargé.

En fait, CanLoad protège un module à charger mais une fois que le module est chargé, alors CanLoad La garde ne fera rien. Supposons que nous ayons protégé le chargement d'un module en utilisant CanLoad protection pour un utilisateur non authentifié. Lorsque l'utilisateur est connecté, le module sera chargé et nous pourrons naviguer sur les chemins des enfants configurés par ce module. Mais lorsque l'utilisateur est déconnecté, il sera toujours en mesure de naviguer dans ces chemins enfants car le module est déjà chargé. Dans ce cas, si nous voulons protéger les chemins enfantins des utilisateurs non autorisés, nous devons également utiliser le module CanActivate garde.

Utilisez CanLoad avant de charger AdminModule :

  {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
        canLoad: [ AuthGuardService ]
      },

Après avoir chargé le module AdminModule, dans le module AdminRouting nous pouvons utiliser CanActivate pour protéger les enfants des utilisateurs non autorisés, comme ici :

{ 
      path: '',
      component: AdminComponent,
      children: [ 
        {
          path: 'person-list',
          component: PersonListComponent,
          canActivate: [ AuthGuardService ]
        }
      ]
    }

Answer 4

En ce qui concerne la question des commentaires dans l'autre message "Si j'utilise canActivate dans le scénario ci-dessus, quelle sera la différence ?"

En fait, pour l'utilisateur, il n'y aura aucune différence, il n'aura aucun accès à la page dans les deux cas. Bien qu'il y ait une différence cachée . Si vous appuyez sur F12 et allez à Sources (dans Chrome) où se trouvent les fichiers de téléchargement. Vous pouvez alors voir que dans le cas où canActive Le fichier avec le code a été téléchargé ( chunk.js ). Même si vous n'avez pas accès à la page.

Mais dans le cas où canLoad il n'y aura pas chunk.js avec le code source.

Comme vous pouvez le constater, cela a un impact très important sur la sécurité.

Et bien sûr, n'oubliez pas que canLoad ne peut être utilisé que pour Modules chargés paresseusement .

Answer 5

peutActiver est utilisé pour empêcher un utilisateur non autorisé

canLoad est utilisé pour empêcher le module entier de l'application

Exemple de peutActiver :

{ path: 'product',canActivate:[RouteGaurd], component : ProductComponent }

Exemple de canLoad :

{ path: 'user' , canLoad: [AuthenticGuard], loadChildren : './user/user.module#UserModule' }