小编典典

我通过从Component树之外访问Redux

Store并通过注销按钮发送相同的操作来解决了这一问题，因为我的拦截器是在单独的文件中创建的，并且在加载任何Component之前先进行加载。

因此，基本上，我做了以下工作：

在index.js文件中：

//....lots of imports ommited for brevity

import { 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 code ommited again...

//Please pay attention to the "RequireAuth" below, we'll talk about it later

ReactDOM.render(

, 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

}

}

function mapStateToProps(state) {

return { session: state.session };

}

return connect(mapStateToProps)(RequireAuth);

}

希望有帮助！

2020-07-22