Redirect mit reagieren-Router in redux Middleware

Question

Ich habe eine Middleware geschaffen, die eine Anforderung überprüft, ob eine ungültige Zugriffsantwort zurückgibt. Wenn der Status ein 401 ist, möchte ich den Benutzer auf die Login-Seite

Hier ist die Middleware-Code in index.js umleiten

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; 

Einschließlich

... 

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

Die Methode Push nicht Leite die Seite um. Ich bin sicher, dass der Code durch diesen Abschnitt geht, da das Protokoll

Answer 1

wenn Sie Redux Stil Aktionen bevorzugen, die Bibliothek auch eine Reihe von Aktions Schöpfer bietet und eine Middle sie und leiten sie an Ihre Geschichte Instanz zu erfassen.

für: push(location), replace(location), go(number), goBack(), goForward()

Sie müssen routerMiddleware installieren für diese Aktion Schöpfer zu arbeiten.

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

Auch Reagieren Router Singleton Versionen der Geschichte (browserHistory und hashHistory) bereitstellt, die Sie importieren können und von überall in Ihrer Anwendung verwenden.

import { browserHistory } from 'react-router' 

if(action.payload != undefined && action.payload.status==401){ 
     browserHistory.push('login'); 
     console.log('session expired'); 
} 

btw für den Check-Auth können Sie meine Antwort unten verwenden onEnter oder redux-auth-wrapper

Answer 2

Verwendung onEnter Methode reagieren-Router zeigt. Rufen Sie eine Funktion auf, die nach dem Zugriff prüft. Beispiel:

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