Difference between Angular's canLoad and canActivate?

Question

What is the difference between canLoad and canActivate?

export interface Route {
  path?: string;
  pathMatch?: string;
  matcher?:         


        

Answer 1

canActivate is used to prevent unauthorized users from accessing certain routes. See docs for more info.

canLoad is used to prevent the application from loading entire modules lazily if the user is not authorized to do so.

See docs and example below for more info.

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

With this code, the code for the AdminModule will only be loaded into the application if AuthGuard returns true.

If the user is not authorized to access this route, and we'd only used a canActivate guard, the AdminModule would be loaded, even though the user would not be able to access that route.

Answer 2

canActivate if unauthorized user enters still load that module . you need canLoad to achieve judgment whether it needs be loaded .

Answer 3

The CanLoad Guard prevents the loading of the Lazy Loaded Module. We generally use this guard when we do not want to unauthorized user to navigate to any of the routes of the module and also stop then even see the source code of the module.

The Angular provides canActivate Guard, which prevents unauthorized user from accessing the route. But it does not stop the module from being downloaded. The user can use the chrome developer console to see the source code. The CanLoad Guard prevents the module from being downloaded.

Actually,CanLoad protects a module to be loaded but once module is loaded then CanLoad guard will do nothing. Suppose we have protected a module loading using CanLoad guard for unauthenticated user. When user is logged-in then that module will be applicable to be loaded and we will be able to navigate children paths configured by that module. But when user is logged-out, still user will be able to navigate those children paths because module is already loaded. In this case if we want to protect children paths from unauthorized users, we also need to use CanActivate guard.

Use CanLoad before loading AdminModule:

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

After loading AdminModule, in AdminRouting module we can use CanActive to protect childs from unauthorized users like bellow:

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

Answer 4

canActivate is used to prevent an unauthorized user

canLoad is used to prevent the entire module of app

Example of canActivate:

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

Example of canLoad:

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

Answer 5

Regarding to question from comments in other post "If I use canActivate in above scenario, what will be the difference ?"

Actually for user there will be no difference, he won't get any access to the page in both cases. Although there is one hidden difference. If you press F12 and move to Sources (in Chrome) where are download files. Then you can see that in case with canActive file with code has been downloaded (chunk.js). Even if you have no access to the page.

But in case with canLoad there will be no chunk.js file with source code.

So as you can see this have really big impact for security.

And of course don't forget that canLoad can be used only for LazyLoaded Modules.

Answer 6

Important to notice that canLoad won't stop someone from getting your source code. The .js won't be downloaded by browser unless user is authorized, but you can force a manual download by issuing a import('./xxxxx.js') on browser console.

Module name can be easly found on you main.js on your routes definition.