在Redux中间件中使用react-router进行重定向

  • Z时代
  • 2024-01-10
  • 分类：问答

我创建了一个中间件，用于检查请求是否返回无效的访问响应。如果状态为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方法不会重定向页面。我肯定代码会通过该部分，因为日志显示

回答：

如果您喜欢Redux风格的动作，该库还提供了一组动作创建者和一个 并将它们重定向到您的历史实例。

对于： push(location), replace(location), go(number), goBack(), goForward()

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

btw for check auth you may use onEnter or redux-

auth-wrapper

以上是 在Redux中间件中使用react-router进行重定向 的全部内容， 来源链接： utcz.com/qa/404375.html

回到顶部