角度的可加载和可激活之间的区别？

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

我应该选哪一个？

88917 次浏览
小开

CanActivate 用于防止未授权用户访问某些路由。

CanLoad 用于防止应用程序在没有授权的情况下延迟加载整个模块。

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

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

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

如果用户未被授权访问此路由，并且我们只使用了 canActivate保护，则将加载 AdminModule，即使用户无法访问该路由。

小开

关于其他职位评论中提出的问题 “如果我在上面的场景中使用 canActivate，会有什么不同呢?”

实际上对于用户来说没有区别，在这两种情况下他都不能访问页面。 虽然有 一个隐藏的区别。如果你按 F12并移动到来源(在 Chrome 中)在那里下载文件。 然后您可以看到，在案件与 可以激活文件的代码已经下载(大块 Js)。即使您无法访问该页。 enter image description here

但是在使用 装弹的情况下，将不会有带源代码的 大块 Js文件。

enter image description here

所以你可以看到这对安全性有很大的影响。

当然不要忘记，装弹只能用于 懒惰加载模块。

小开

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

CanLoad 用于阻止 app 的整个模块

可以激活的例子:

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

装弹的例子:

{ path: 'user' , canLoad: [AuthenticGuard], loadChildren : './user/user.module#UserModule' }
小开
  • CanActivate -决定一个路由是否可以被激活，这个约束对于延迟加载的功能模块来说可能不是最好的方式，因为这个约束将总是加载内存中的模块，即使约束返回 false，这意味着用户没有权限访问该路由。
  • CanLoad -决定模块是否可以延迟加载，控制路由是否可以加载。这对于延迟加载的特性模块非常有用。如果警卫回来是假的，他们甚至不会装子弹。

这是我用延迟加载的特性模块对两个警卫进行的测试:

1. 启动警卫测试

你会注意到在 Network 页面的底部，它发出了24个请求，大小为9.5 MB，在3.34秒内完成传输，在3.47秒内完全加载。

CanActivate Guard Test On Lazy Loaded Feature Module

1. CanLoad Guard Test

在这里您将看到，当我们使用 CanLoad Guard 作为浏览器时，只发出了18个请求，大小为9.2 MB，传输完成时间为2.64秒，完全加载时间为2.59秒。

CanLoad Guard Test On Lazy Loaded Feature Module

如果用户没有得到授权，CanLoad Guard 从来不会加载模块数据，这会给你带来更多的性能，因为加载时间减少了将近1秒，这是加载网页的巨大时间，毫无疑问这取决于模块的大小。

提示: < em > 如果您想在您的项目上进行测试，请确保选中了 network 选项卡中的 Disable Cache复选框，它将在第一个图像中标记出来

小开

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

小开

加载保护防止装载延迟加载模块。我们通常使用这个保护时，我们不希望未经授权的用户导航到模块的任何路由，也停止然后甚至看到模块的源代码。

角度提供 可以激活保护，防止未经授权的用户访问路由。但这并不能阻止模块被下载。用户可以使用 chrome 开发者控制台查看源代码。CanLoad Guard 阻止下载模块。

实际上，加载保护一个要加载的模块，但是一旦模块被加载，那么 加载保护将什么也不做。假设我们已经为未经身份验证的用户使用 加载保护装载模块。当用户登录，然后该模块将适用于被加载，我们将能够导航子路径配置的该模块。但是当用户注销时，仍然可以导航这些子路径，因为模块已经加载。在这种情况下，如果我们想保护子路径从未经授权的用户，我们还需要使用 激活保护。

在加载 AdminModule 之前使用 加载:

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

在加载 AdminModule 之后，在 AdminRouting 模块中，我们可以使用 激活来保护孩子不受未授权用户的伤害，比如下面的内容:

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

重要的是要注意，装弹不会阻止别人获取您的源代码。 那个。Js 不会被浏览器下载，除非用户被授权，但是你可以通过发出一个导入(’)来强制手动下载。/xxxxx.js’)。

在您的 main.js 路由定义中可以很容易地找到模块名。

小开

以下是我在使用 装弹和 可以激活懒惰路由时发现的情况:

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 来处理延迟模块和 可以激活基于组件的路由

小开

这里没有提到的一个很大的区别是，装弹只与 loadChildren一起工作。

为了防止 component被加载，只有 canActivate会被触发。

有关更多细节，请参见 为什么路线守卫可以装载不发射，但可以激活。


提交答案