Différence entre canLoad et canActivate d'Angular?

Quelle est la différence entre canLoadet 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 devrais-je lequel d'entre eux?

canActivate est utilisé pour empêcher les utilisateurs non autorisés d'accéder à certaines routes. Consultez la documentation pour plus d'informations.

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

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

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

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

Si l'utilisateur n'est pas autorisé à accéder à cette route et que nous n'avons utilisé qu'un canActivategarde, le AdminModuleserait chargé, même si l'utilisateur ne pourrait pas accéder à cette route.

• CanActivate - Décide si une route peut être activée, cette garde peut ne pas être le meilleur moyen 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 a renvoyé 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 tardivement. Ils ne se chargeront même pas si le garde renvoie false.

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

1. Test de protection CanActivate

vous remarquerez en bas de la page 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 CanLoad Guard

ici, vous verrez la grande différence lorsque nous avons utilisé CanLoad Guard car le navigateur n'a fait que 18 requêtes avec une taille de 9,2 Mo transférées, finissant en 2,64 secondes et 2,59 secondes à pleine charge.

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

Astuce: si vous souhaitez faire le test sur votre projet, assurez-vous que la Disable Cachecase à cocher dans l'onglet réseau est cochée, elle est marquée dans la première image

En ce qui concerne la question des commentaires dans un 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 passez à Sources (dans Chrome) où se trouvent les fichiers téléchargés. Ensuite, vous pouvez voir que dans le cas où le fichier canActive 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 de canLoad, il n'y aura pas de fichier chunk.js avec le code source.

Comme vous pouvez le voir, 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 les modules LazyLoaded .

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

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

Exemple de canActivate :

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

Exemple de canLoad :

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

La canLoad Guard empêche le chargement du module Loaded Lazy. Nous utilisons généralement cette garde lorsque nous ne voulons pas à un utilisateur non autorisé de naviguer vers l'une des routes du module et également de s'arrêter puis même de voir le code source du module.

L'Angular fournit canActivate Guard, qui empêche les utilisateurs non autorisés d'accéder à l'itinéraire. Mais cela n'empêche pas le téléchargement du module. L'utilisateur peut utiliser la console de développement Chrome pour voir le code source. CanLoad Guard empêche le téléchargement du module.

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

Utilisez CanLoad avant de charger AdminModule:

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

Après avoir chargé AdminModule, dans le module AdminRouting, nous pouvons utiliser CanActive pour protéger les enfants contre les utilisateurs non autorisés comme ci-dessous:

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

canActivate si un utilisateur non autorisé entre toujours charger ce module. vous avez besoin de canLoad pour déterminer s'il doit être chargé.

Il est important de noter que canLoad n'empêchera personne d'obtenir votre code source. Le .js ne sera pas téléchargé par le navigateur à moins que l'utilisateur n'y soit autorisé, mais vous pouvez forcer un téléchargement manuel en exécutant une importation ('./ xxxxx.js') sur la console du navigateur.

Le nom du module peut être facilement trouvé sur votre main.js sur la définition de vos itinéraires.