レスキューレックスで認証が必要なレイジーロードコンポーネント

Question

私はreact + reduxを使用してウェブサイトを作成しようとしています。 私はすでにサーバーにjwt認証をセットアップしました。 私がしたいのは、コンポーネント/コンテナとレデューサーの一部を遅延ロードして、認証されたユーザーだけがダウンロードできるようにすることです。私はすでに、認証されていないユーザー（クライアント側）からコンポーネントを隠す方法を知っていますが、相対的なJavaScriptコードをダウンロードしないようにしたいと考えています。

私はwebpackを使用していますが、すでに反応ルータとrequire-ensure（https://stackoverflow.com/a/33044701/2920112）を調べましたが、この方法では認証がまったく処理されないようです。 何らかの形でfetchを使用することも考えましたが（おそらくwebpackとプライベートコードを別々にバンドルしています）、取り込んだバンドルをどうすればいいのか分かりません。

私は間違った方法で問題に近づいていますか？ 私が見る唯一の代替案は、パブリックコンテンツのみを含むWebpackバンドルをロードするHTMLファイルとプライベートコードをダウンロードするHTMLファイルの2つを提供することです。しかしこれは本当に最適ではないようです。 正しいアプローチは何ですか？

Answer 1

我々は反応するルータを使用してこれを解決：

<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'); 
    } 
}; 

をだからあなたのログインページが再来{ログイン真}：{成功}に設定する必要があり、ユーザーが認証された場合。 認証されたユーザーが/ secureにアクセスしようとすると、彼は/ loginにリダイレクトされます。

require.ensureは認証の役割を果たしません。 webpackがjsファイルのチャンクを分割して遅延ロードするためのエントリポイントです。