React redux axios thunk， wait for interceptors.response refresh token

Question

我使用了redux和redux-thunk，并使用axios拦截器响应作为刷新令牌，我的代码是：

axios.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response && error.response.data.error === 'token_expired') {
        axios.get('/refresh')
            .then(response => {
                let newToken = response.data.newToken;
                dispatch(refreshToken(newToken))
                error.config.headers.Authorization = 'Bearer ' + newToken;
                console.log(error.config);
                return axios.request(error.config);
            });
    } else {
        return Promise.reject(error);
    }
});

我的代码工作并刷新令牌，但redux操作不会等待< code > axios . interceptors . response 并在刷新令牌之前返回< code>undefined

我能找谁来解决这个问题？

更新

我将代码更改为：

axios.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response && error.response.data.error === 'token_expired') {
        dispatch(getNewToken(newToken => {
            error.config.headers.Authorization = 'Bearer ' + newToken;
            return axios.request(error.config);
        }))
    } else {
        return Promise.reject(error);
    }
});

getNewToken是:

export const getNewToken = (onSuccess) => {
    return dispatch => {
        axios.get('/refresh')
            .then(response => {
                let newToken = response.data.newToken;
                dispatch(refreshToken(newToken))
                onSuccess(newToken);
            });
    }
}

当我检查浏览器 Web 开发人员时，在网络中这项工作并请求使用新令牌重复并有效，但我的操作不会再次运行以呈现响应

我的错在哪里？

更新2:

我的中间件：

const jwtTokenRefresh = ({ dispatch, getState }) => (next => (action) => {
    const timeStamp = Math.floor(Date.now() / 1000);
    const expiration = getState().auth.expiration;
    if (expiration && timeStamp > expiration) {

        axios.get('/refresh')
            .then(response => {
                let newToken = response.data.newToken;
                dispatch(refreshToken(newToken))
            })
            .then(() => {
                next(action);
            })
    }else {
        return next(action);
    }
});

和刷新令牌操作:

export const refreshToken = dispatch => {
    return dispatch => {
        axios.get('/refresh')
            .then(response => {
                console.log(response);
                let newToken = response.data.newToken;
                const rememberMe = localStorage.getItem('token') ? true : false;
                dispatch(authSuccess(newToken, rememberMe))
            });
    }
}

Answer 1

您可以将设置新令牌作为回调函数传递给refreshToken（）操作，并在refreshToken返回成功结果时调用它：

dispatch(refreshToken((newToken) => {
    error.config.headers.Authorization = 'Bearer ' + newToken;
    console.log(error.config);
    return axios.request(error.config);
  })
)

和刷新令牌动作类似于

refreshToken(onSuccess, onFailure) {
     axios.post('/refreshTokenUrl')
     .then(responseData => {
         const {token} = responseData;
         onSuccess(token);
     })
}