React + redux + axios + thunk，等待interceptors.response 刷新token

Question

我使用了redux和redux-thunk，并使用axios interceptors response作为刷新令牌，我的代码是：

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 操作不等待 axios.interceptors.response 和刷新令牌之前重新运行 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 动作类似于

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