Angular中已有懒加载与canActivate，canLoad的作用是什么？

你的现有认知没问题，下面直接说canLoad的核心价值，以及它和另外两者的本质差异：

核心区别：执行时机与资源控制 #

• 懒加载：只是实现「用户触发导航前不加载模块」，但完全不做权限校验——哪怕用户没权限，只要点了对应路由，浏览器还是会下载该模块的JS文件，只是最后可能被守卫拦截无法进入页面。
• canActivate：权限校验是在模块已经下载完成后执行的。也就是说，无权限用户触发导航时，模块资源已经被请求并加载到客户端了，拦截只是阻止进入路由，无法避免资源浪费，甚至可能带来代码泄露的风险。
• canLoad：它的执行时机是模块开始下载之前。如果用户无权限，canLoad会直接拦截导航请求，浏览器根本不会发起懒加载模块的资源请求。这才是它不可替代的核心作用：从根源上阻止无权限用户获取懒加载模块的代码，同时节省不必要的带宽消耗。

实际场景中的必要性 #

举个典型例子：你的应用有一个付费专属的懒加载模块。如果只用canActivate，未付费用户点击路由时，模块代码还是会被下载到客户端——虽然他们进不去，但懂点技术的用户能从浏览器开发者工具里拿到模块代码，这存在安全隐患，也浪费了服务器带宽和用户流量。而用canLoad的话，未付费用户的请求会直接被拦截，模块代码根本不会被请求，完美解决这两个问题。

注意事项 #

• canLoad只能作用于懒加载路由，对非懒加载路由无效。
• 如果同时配置了canLoad和canActivate，会先执行canLoad校验，通过后才会下载模块，之后再执行canActivate的校验。

内容的提问来源于stack exchange，提问作者Haris Khan