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

Я создал промежуточное программное обеспечение, которое проверяет, возвращает ли запрос недопустимый ответ доступа. Если статус 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'));

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


reactjs react-redux react-router react-jsx
person wnoveno    schedule 22.06.2016    source источник
comment
проверьте мой ответ ниже, я надеюсь, что я помог вам.   -  person Kokovin Vladislav    schedule 25.06.2016

Ответы (2)


arrow_upward
7
arrow_downward

если вы предпочитаете действия в стиле 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'))

Кроме того, React Router предоставляет одноэлементные версии истории (browserHistory и hashHistory), которые вы можете импортировать и использовать из любого места вашего приложения.

import { browserHistory } from 'react-router'

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

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

person Kokovin Vladislav    schedule 22.06.2016

arrow_upward
1
arrow_downward

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

function checkAccess() {
   //some logic to check 
    if(notAuthorized){ window.location.href= "/login"; }
  }
person Vikramaditya    schedule 22.06.2016
comment
Вопрос в том, как перенаправить на основе конкретного действия, которое отправляется в хранилище, которое не привязано строго к процессу ввода маршрута. Кроме того, вторым аргументом функции onEnter является replace, что является формальным способом указания нового маршрута для перехода. - person horyd; 22.06.2016