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

Question

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

我正在使用webpack,我已经研究过react-router和require-ensure(/sf/answers/2313129101/),但这种方法似乎根本不处理身份验证.我也考虑过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}} 中设置。如果经过身份验证的用户尝试访问 /secured，他将被重定向到 /login。

require.ensure不起到任何身份验证的作用。它只是 webpack 分割 js 文件块以进行延迟加载的入口点。