Angular的负载和canActivate之间的区别？

Question

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;
}

什么时候我应该选哪一个？

Answer 1

canActivate 用于防止未经授权的用户访问某些路由。 See docs了解更多信息。

canLoad 用于防止应用程序懒惰地加载整个模块（如果用户无权这样做）。

See docs以及以下示例以获取更多信息。

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

使用此代码，如果AuthGuard返回true，则只会将AdminModule的代码加载到应用程序中。

如果用户无权访问此路由，并且我们只使用canActivate防护，则会加载AdminModule，即使用户无法访问该路由

Answer 2

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

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

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

Answer 3

关于其他帖子中的评论提问 “如果我在上面的场景中使用canActivate，会有什么区别？”

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

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

因此，您可以看到这对安全性有很大影响。

当然不要忘记 canLoad 只能用于 LazyLoaded Modules 。

Answer 4

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

canLoad 用于阻止应用的整个模块

canActivate 的示例：

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

canLoad 的示例：

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

Answer 5

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

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

1。 CanActivate 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复选框，该复选框在第一张图片中标记了 < / p>

Answer 6

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

Answer 7

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

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

Answer 8

以下是我在使用 canLoad 和 canActivete 和惰性路由时发现的情况：

A) 如果使用 canLoad 或 canActivate：

1.当模块尚未下载时：

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.当模块已经下载时

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) 如果同时使用 canLoad 和 canActivate：

1.当模块尚未下载时：

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.当模块已经下载时

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

所以我更喜欢对惰性模块同时使用 canLoad 和 canActivate 并且 canActivate 用于基于组件的路由