Question

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

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

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

Answer 1

我们通过使用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}}中设置您的登录页面。如果经过身份验证的用户尝试访问/担保，则会将其重定向到/ login。

require.ensure不起任何身份验证的作用。它只是webpack的一个入口点，可以将js文件块拆分为延迟加载。

Answer 2

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

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

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

需要使用react-redux

2 个答案: