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

Voici les cas que j'ai constatés lors de l'utilisation de l'application canLoad y canActivete avec des routes paresseuses :

A) Si canLoad ou canActivate est utilisé :

1. Lorsque le module n'est pas déjà téléchargé :

canLoad: 
  true: module will be downloaded
  false: module will not be downloaded

canActivate:
  true: module will be downloaded and user will be granted to access particular route
  false: module will be downloaded and user will be prevented to access particular route

2. Lorsque le module est déjà téléchargé

canLoad: It does not do anything. Like its not there in code.

canActivate:
  true: user will be granted to access particular route
  false: user will be prevented to access particular route

B) Si canLoad et canActivate sont tous deux utilisés :

1. Lorsque le module n'est pas déjà téléchargé :

canLoad: 
  true: module will be downloaded and passed control to check canActivate
  false: Neither module will be downloaded nor canActivate will be called

canActivate:
  true: user will be granted to access particular route
  false: user will be prevented to access particular route

2. Lorsque le module est déjà téléchargé

canLoad:
  It does not do anything. Like its not there.

canActivate:
  true: user will be granted to access particular route
  false: user will be prevented to access particular route

Je préfère donc utiliser à la fois canLoad et canActivate pour les modules paresseux et canActivate pour les routes basées sur des composants

Answer 2

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

Le nom du module peut être facilement trouvé dans votre main.js sur votre définition des routes.

Answer 3

peutActiver si un utilisateur non autorisé entre dans le module, il faut charger ce module. canLoad pour parvenir à juger si elle doit être chargée.