Angular：仅在授权的情况下从服务器加载延迟加载模块（使用 JWT）

Question

我在我的角度应用程序中使用延迟加载的模块，到目前为止一切正常。

现在我有一个关于安全的具体问题，但尚未找到答案。您有机会使用 Angular Guard 和“CanLoad”来“保护”延迟加载模块。但这仅在前端，因此可以绕过它，即使不允许用户查看 ist，该模块也会被加载。例如管理区域。

我使用 JWT 进行授权，数据全部托管在 Azure 后端上，与托管 Angular 应用程序的应用程序服务器完全分开。

我现在正在考虑是否有任何方法可以使用 JWT 来验证和检查当前模块是否允许由该用户服务器端加载。

例如，您有以下模块：

• 特征A
• 特征B
• 特征C
• 行政

在每个功能模块/区域的 JWT 中，有效负载中都有一个变量，表示是否允许用户使用此功能（true/false）。

现在，如果用户尝试加载功能 A 的延迟加载模块，我想使用公钥验证应用程序服务器上的 JWT，以了解“此密钥是有效的，并且与 azure 服务器的签名完全相同” 。

接下来，它将检查 FeatureA 的变量是否设置为 true。如果是这样，我将模块（js-chunk 文件）返回给客户端。如果没有，我会返回403禁止。

因此，即使应用程序被修改，只有当该模块具有有效的 JWT（表明该功能已为该用户激活）时，该人才能获得该功能模块。

有什么办法可以做到这一点吗？我不知道应该从哪里开始寻找解决方案。因此，如果有人能告诉我如何获得它以及我需要什么，我将非常感激！

提前致谢。

Answer 1

...另一位开发人员为另一辆战车发明了另一个轮子...

首先，Webpack jsonp函数接收延迟加载的模块接收（如果我们谈论的是内部使用 Webpack 的 Angular CLI），该函数默认情况下只是将另一个脚本注入到页面中；这意味着您几乎没有机会通过此请求传递令牌，因为它是作为脚本加载的，而不是作为 XHR 加载的。添加令牌作为 get 参数也会是一个安全问题，所以我认为这也不是一个选项（即使它是可以实现的）。

让我们假设，您可以更改 Webpack 加载块的方式（或者例如编写一个自定义服务工作线程来执行您想要的操作，我仍然不确定它是否可以轻松完成）。那么我们就来回答这个问题：

为什么需要保护管理（或其他）模块？

这只是一段代码。如果这个模块中有一些敏感的东西，那么这是你的架构的问题。所有敏感数据都应该来自API。

您唯一需要保护的是应用程序中使用的管理 API。每个调用都应该根据该调用提供的令牌进行验证。如果用户scope在令牌中具有正确的（或用于授权的任何内容），则请求应返回数据，否则返回 403。差不多就是这样。