¿Diferencia entre canLoad y canActivate de Angular?

¿Cuál es la diferencia entre canLoady 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;
}

¿Cuándo debería cuál de ellos?

canActivate se utiliza para evitar que usuarios no autorizados accedan a determinadas rutas. Consulte los documentos para obtener más información.

canLoad se utiliza para evitar que la aplicación cargue módulos completos de forma perezosa si el usuario no está autorizado para hacerlo.

Consulte los documentos y el ejemplo a continuación para obtener más información.

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

Con este código, el código para AdminModule solo se cargará en la aplicación si AuthGuard regresa true.

Si el usuario no está autorizado para acceder a esta ruta, y solo hubiéramos usado un canActivateguardia, AdminModulese cargaría, aunque el usuario no podría acceder a esa ruta.

• CanActivate : decide si se puede activar una ruta, esta protección puede no ser la mejor manera para los módulos de funciones que tienen carga diferida, ya que esta protección siempre cargará el módulo en la memoria, incluso si la protección devolvió falso, lo que significa que el usuario no tiene autorización para acceder. la ruta.
• CanLoad : decide si un módulo se puede cargar de forma perezosa, controla si se puede cargar una ruta. Esto resulta útil para los módulos de funciones que se cargan de forma diferida. Ni siquiera se cargarán si el guardia devuelve falso.

Esta es una prueba que hice en ambos guardias con un módulo de funciones que se carga de forma diferida:

1. Prueba CanActivate Guard

Notará en la parte inferior de la página de Red que realizó 24 solicitudes con un tamaño de 9.5 MB transferidas terminando en 3.34 segundos y completamente cargadas en 3.47 segundos.

1. Prueba CanLoad Guard

aquí verá la gran diferencia cuando usamos CanLoad Guard ya que el navegador hizo solo 18 solicitudes con un tamaño de 9.2 MB transferidas terminando en 2.64 segundos y completamente cargado 2.59 segundos.

CanLoad Guard nunca carga los datos del módulo si el usuario no está autorizado y eso le da más rendimiento ya que el tiempo de carga disminuyó casi 1 segundo y eso es un tiempo enorme en la carga de páginas web, sin duda depende del tamaño del módulo.

Consejo: si desea realizar la prueba en su proyecto, asegúrese de que la Disable Cachecasilla de verificación en la pestaña de red esté marcada, está marcada en la primera imagen

Con respecto a la pregunta de los comentarios en otra publicación "Si uso canActivate en el escenario anterior, ¿cuál será la diferencia?"

En realidad, para el usuario no habrá diferencia, no tendrá acceso a la página en ambos casos. Aunque hay una diferencia oculta . Si presiona F12 y se mueve a Fuentes (en Chrome) donde están los archivos de descarga. Luego puede ver que en caso de que se haya descargado el archivo canActive con código ( chunk.js ). Incluso si no tiene acceso a la página.

Pero en el caso de canLoad, no habrá ningún archivo chunk.js con código fuente.

Como puede ver, esto tiene un gran impacto en la seguridad.

Y, por supuesto, no olvide que canLoad solo se puede usar para módulos LazyLoaded .

canActivate se utiliza para evitar que un usuario no autorizado

canLoad se utiliza para evitar que todo el módulo de la aplicación

Ejemplo de canActivate :

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

Ejemplo de canLoad :

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

El CanLoad Guardia evita que la carga del módulo cargado perezoso. Generalmente usamos esta protección cuando no queremos que un usuario no autorizado navegue a alguna de las rutas del módulo y también se detenga y luego incluso vea el código fuente del módulo.

El Angular proporciona canActivate Guard, que evita que usuarios no autorizados accedan a la ruta. Pero no impide que se descargue el módulo. El usuario puede utilizar la consola de desarrollo de Chrome para ver el código fuente. CanLoad Guard evita que se descargue el módulo.

En realidad, CanLoad protege la carga de un módulo, pero una vez que se carga el módulo, CanLoad guard no hará nada. Supongamos que hemos protegido la carga de un módulo utilizando CanLoad guard para usuarios no autenticados. Cuando el usuario inicie sesión, ese módulo será aplicable para ser cargado y podremos navegar por las rutas secundarias configuradas por ese módulo. Pero cuando el usuario cierra la sesión, aún el usuario podrá navegar por esas rutas secundarias porque el módulo ya está cargado. En este caso, si queremos proteger las rutas de los niños de los usuarios no autorizados, también necesitamos utilizar CanActivate guard.

Utilice CanLoad antes de cargar AdminModule:

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

Después de cargar AdminModule, en el módulo AdminRouting podemos usar CanActive para proteger a los niños de usuarios no autorizados como a continuación:

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

canActivate si un usuario no autorizado ingresa aún carga ese módulo. necesita canLoad para juzgar si es necesario cargarlo.

Es importante notar que canLoad no impedirá que alguien obtenga su código fuente. El .js no se descargará mediante el navegador a menos que el usuario esté autorizado, pero puede forzar una descarga manual emitiendo una importación ('./ xxxxx.js') en la consola del navegador.

El nombre del módulo se puede encontrar fácilmente en main.js en la definición de rutas.