我通过从Component树之外访问Redux
Store并通过注销按钮发送相同的操作来解决了这一问题，因为我的拦截器是在单独的文件中创建的，并且在加载任何Component之前先进行加载。
因此，基本上，我做了以下工作：
在
index.js文件中：
//....lots of imports ommited for brevityimport { createStore, applyMiddleware } from 'redux';import reduxThunk from 'redux-thunk';import reducers from './reducers';import { UNAUTH_USER } from './actions/types'; //this is just a constants file for action types.const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);const store = createStoreWithMiddleware(reducers);//Here is the guy where I set up the interceptors!NetworkService.setupInterceptors(store);//lots of pre ommited again...//Please pay attention to the "RequireAuth" below, we'll talk about it laterReactDOM.render( <Provider store={store}> <BrowserRouter> <div> <Header /> <main className="plan-container"> <Switch><Route exact path="/" component={Landing} /><Route exact path="/login" component={Login} /><Route exact path="/signup" component={Signup} /><Route exact path="/calendar" component={RequireAuth(Calendar)} /><Route exact path="/profile" component={RequireAuth(Profile)} /> </Switch> </main> </div> </BrowserRouter> </Provider> , document.querySelector('.main-container'));并在
network-service.js文件：
import axios from 'axios';import { UNAUTH_USER } from '../actions/types';export default { setupInterceptors: (store) => { // Add a response interceptor axios.interceptors.response.use(function (response) { return response; }, function (error) { //catches if the session ended! if ( error.response.data.token.KEY == 'ERR_EXPIRED_TOKEN') { console.log("EXPIRED TOKEN!"); localStorage.clear(); store.dispatch({ type: UNAUTH_USER }); } return Promise.reject(error); }); }};最后但并非最不重要的一点是，我有一个HOC（高阶组件），它将受保护的组件包装在会话结束时进行实际重定向的位置。这样，当我触发动作类型UNAUTH_USER时，它将我的化简器上的
isLogged属性设置
session为
false，因此该组件会随时得到通知并为我进行重定向。
require-auth.js组件文件：
import React, { Component } from 'react';import { connect } from 'react-redux';export default function(ComposedComponent) { class RequireAuth extends Component { componentWillMount() { if(!this.props.session.isLogged) { this.props.history.push('/login'); } }; componentWillUpdate(nextProps) { if(!nextProps.session.isLogged) { this.props.history.push('/login'); } }; render() { return <ComposedComponent {...this.props} /> } } function mapStateToProps(state) { return { session: state.session }; } return connect(mapStateToProps)(RequireAuth);}希望有帮助！
