Angular的canLoad和canActivate之间的区别？

canLoad和之间有什么区别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;
}

我什么时候应该选哪个？

canActivate用于防止未经授权的用户访问某些路由。有关更多信息，请参阅文档。

如果未获得用户的授权，canLoad用于防止应用程序延迟加载整个模块。

有关更多信息，请参见下面的文档和示例。

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

使用此代码，只有AuthGuard返回时，才会将AdminModule的代码加载到应用程序中true。

如果用户无权访问此路由，而我们仅使用了canActivate防护，则AdminModule即使用户无法访问该路由，也将加载该防护。

• CanActivate-确定是否可以激活路由，此防护可能不是延迟加载的功能模块的最佳方式，因为此防护将始终将模块加载到内存中，即使该防护返回false，这也意味着用户无权访问路线。
• CanLoad-决定是否可以延迟加载模块，控制是否可以加载路由。这对于延迟加载的功能模块很有用。如果警卫队返回假，他们甚至不会加载。

这是我对两个后卫使用延迟加载的功能模块进行的测试：

1.可以激活Guard测试

您会在“网络”页面的底部注意到，它发出了24个9.5 MB大小的请求，这些请求在3.34秒内完成传输，并在3.47秒内完成加载。

1. CanLoad Guard测试

在这里，当我们使用CanLoad Guard时，您会看到很大的不同，因为浏览器仅发出了9.2 MB大小的18个请求，在2.64秒内完成了传输，并在2.59秒内完成了完全加载。

如果用户未授权，CanLoad Guard永远不会加载模块数据，这将为您带来更高的性能，因为加载时间减少了将近1秒钟，这是加载网页的巨大时间，毫无疑问，这取决于模块的大小。

提示： 如果要在项目上进行测试，请确保Disable Cache选中“网络”选项卡中的复选框，该复选框已在第一张图像中标记

关于其他帖子中的评论问题， “如果在上述情况下使用canActivate，会有什么区别？”

实际上，对于用户而言，这没有什么区别，在两种情况下，他都无法访问该页面。虽然存在一个隐藏的差异。如果您按F12键并移至Sources（在Chrome中），则在其中下载文件。然后，您可以看到在下载带有代码的canActive文件的情况下（chunk.js）。即使您无权访问该页面。

但是如果使用canLoad，将不会包含带有源代码的chunk.js文件。

因此，正如您所看到的，这对安全性有很大的影响。

当然，不要忘记canLoad只能用于LazyLoaded模块。

canActivate用于防止未经授权的用户

canLoad用于防止整个应用模块

canActivate的示例：

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

canLoad的示例：

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

所述CanLoad保护防止延迟加载模块的加载。通常，当我们不想让未经授权的用户导航到模块的任何路线，并且也停下来甚至看不到模块的源代码时，我们通常使用此防护。

Angular提供canActivate Guard，可以防止未经授权的用户访问路由。但这不会阻止模块的下载。用户可以使用chrome开发者控制台查看源代码。CanLoad Guard阻止下载模块。

实际上，CanLoad保护要加载的模块，但是一旦模块被加载，CanLoad保护将什么也不做。假设我们使用CanLoad Guard保护了未经身份验证的用户的模块加载。当用户登录后，该模块将适用于加载，并且我们将能够导航该模块配置的子路径。但是，当用户注销后，由于模块已加载，因此用户仍将能够导航那些子路径。在这种情况下，如果我们想保护子路径免受未授权用户的侵害，我们还需要使用CanActivate保护。

在加载AdminModule之前使用CanLoad：

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

加载AdminModule后，在AdminRouting模块中，我们可以使用CanActive来保护孩子免受未授权用户的侵害，例如以下情况：

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

如果未经授权的用户进入，仍然可以激活该模块。您需要canLoad来判断是否需要加载。

重要的是要注意canLoad不会阻止某人获取您的源代码。除非用户授权，否则浏览器不会下载.js，但是您可以通过在浏览器控制台上发布import（'./ xxxxx.js'）来强制进行手动下载。

可以在路由定义的main.js上轻松找到模块名称。