需要使用 react-redux 进行身份验证的延迟加载组件答案

【问题标题】：Lazy load components requiring authentication with react-redux需要使用 react-redux 进行身份验证的延迟加载组件
【发布时间】：2017-06-25 03:51:28
【问题描述】：

我正在尝试使用 react+redux 创建一个网站。我已经在服务器上设置了 jwt 身份验证。我想做的是延迟加载我的一些组件/容器和减速器，以便它们只能由经过身份验证的用户下载。我已经知道如何对未经身份验证的用户（客户端）隐藏组件，但我更愿意阻止他们下载相关的 javascript 代码。

我正在使用 webpack，我已经研究过 react-router 和 require-ensure (https://stackoverflow.com/a/33044701/2920112)，但这种方法似乎根本无法处理身份验证。我也考虑过以某种方式使用 fetch（可能将私有代码与 webpack 单独捆绑），但是一旦我获取它，我就不知道如何处理它。

我是否以错误的方式解决问题？我看到的唯一选择是提供两个 HTML 文件，一个加载仅包含公共内容的 webpack 包，另一个下载私有代码。然而，这似乎真的不是最理想的。正确的做法是什么？

【问题讨论】：

我相信你可以使用require-ensure，你只需要包含你自己的认证逻辑。用户身份验证会更改您使用 require.ensure() 调用的内容以及您将传递给 cb 回调的组件。
您找到解决方案了吗？我面临着类似的问题。所有资产都受到保护，并且在请求标头中需要一个令牌。不知道如何劫持 require.insure 在后台执行的任何操作，以便在下载下一个块时发送令牌。
也许您可以使用 dynamic expressions in a dynamic import 包含一个 API 令牌，然后可以由 http 服务器解析该令牌以从 url 中提取令牌，并且仅在您通过身份验证时才提供文件。类似import(`./secure/${token}-file.js`)。

标签： reactjs webpack redux jwt

【解决方案1】：

对于仍在研究此问题的任何人，React 现在添加了拆分代码并在使用 webpack 时进行延迟加载的功能：

https://reactjs.org/docs/code-splitting.html

虽然这本身不足以要求对延迟加载的模块进行身份验证，但它可以与一些生活在反向代理上的授权机制配对。

【讨论】：

【解决方案2】：

我们通过使用 react-router 解决了这个问题：

<Route 
    key="secured_component" 
    path="/secured" 
    onEnter={handleEnterSecuredComponent}
    getComponent=({nextState, cb) => {
       require.ensure([], () => {
           cb(null, require('YourComponent').default);
       });
    }}
/>
...
const handleEnterSecuredComponent = (nextState, replace) => {
    const {login: {success}} = store.getState();
    if (!success) {
       replace('/login');
    }
};

因此，如果用户通过身份验证，您的登录页面应该设置为 redux {login: {success: true}}。如果经过身份验证的用户尝试访问 /secured，他将被重定向到 /login。

require.ensure 不扮演任何身份验证的角色。它只是 webpack 拆分 js 文件块以进行延迟加载的入口点。

【讨论】：

我已经在做类似的事情（使用 react-router），但这并不能阻止未经身份验证的用户在愿意时加载合理的 javascript 代码。如果他通过require.ensure手动向webpack创建的chunk的URL提交GET请求，就没有授权机制阻止他下载了。
@lgpasquale：前端的 Javascript 根本不应该包含合理的代码……永远不要相信客户端！您实现的所有“真实”安全机制都应该只是服务器端。其他一切都只是为了用户体验。