Перенаправление с использованием реактивного маршрутизатора в промежуточном программном обеспечении redux

Question

Я создал промежуточное программное обеспечение, которое проверяет, возвращает ли запрос неверный ответ на доступ. Если состояние является 401, я хочу, чтобы перенаправить пользователя на страницу входа

Вот код промежуточного

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; 

Включая его в 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')); 

Метод толчок не перенаправить страницу. Я уверен, что код проходит через этот раздел, так как журнал показывает

Answer 1

если вы предпочитаете действия стиля Redux, библиотека также предоставляет набор создателей действий и промежуточного программного обеспечения, чтобы захватить их и перенаправлять их к экземпляру истории.

для: 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), который можно импортировать и использовать в любом месте вашего приложения.

import { browserHistory } from 'react-router' 

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

кстати для проверки AUTH вы можете использовать onEnter или redux-auth-wrapper

Answer 2

onEnter метод реагирования маршрутизатора. вызовите функцию, которая будет проверять доступ. Пример:

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