reduxミドルウェアで反応ルータを使用してリダイレクト

Question

リクエストが無効なアクセス応答を返すかどうかを確認するミドルウェアを作成しました。ステータスが401であれば、私は、ログインページ

にユーザーをリダイレクトしたい。ここミドルウェア・コード

index.js

... 

const store = createStore(reducers, undefined, 
      compose(
       applyMiddleware(promise,auth_check) 
       ) 
      ); 
const history = syncHistoryWithStore(browserHistory, store); 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={history} routes={routes} /> 
    </Provider> 
    , document.querySelector('.app')); 

でそれを含める

import React from 'react'; 
import { push, replace } from 'react-router-redux'; 

const auth_check = ({ getState }) => { 
    return (next) => (action) => { 
    if(action.payload != undefined && action.payload.status==401){ 
     push('login'); 
     console.log('session expired'); 
    } 
    // Call the next dispatch method in the middleware chain. 
    let returnValue = next(action); 

    return returnValue 
    } 
} 

export default auth_check; 

プッシュ方式ではないですページをリダイレクトします。ログが表示されているのでコードがそのセクションを通過すると確信しています

Answer 1

、ライブラリはまた、アクションのクリエイターと、彼らにをキャプチャし、あなたの履歴インスタンスにリダイレクトするミドルウェアのセットを提供します。

のために：push(location), replace(location), go(number), goBack(), goForward()

あなたは仕事にこれらのアクションクリエイターのためのrouterMiddlewareをインストールする必要があります。

import { routerMiddleware, push } from 'react-router-redux' 

// Apply the middleware to the store 
const middleware = routerMiddleware(browserHistory) 
const store = createStore(
    reducers, 
    applyMiddleware(middleware) 
) 

// Dispatch from anywhere like normal. 
store.dispatch(push('/foo')) 

はまた、ルータは、インポートし、アプリケーションのどこからでも使用することができます歴史（browserHistoryとhashHistory）のシングルトンのバージョンを提供して反応します。あなたは以下の私の答えをチェックアウトonEnterまたはredux-auth-wrapper

Answer 2

onEnter反応ルータの方法。アクセスをチェックする関数を呼び出します。例：あなたはReduxのスタイルのアクションを好む場合

function checkAccess() { 
    //some logic to check 
    if(notAuthorized){ window.location.href= "/login"; } 
    }