使用redux-thunk捕获错误

Question

我正在使用redux-thunk在我的React应用程序中进行API调用。

每隔30分钟，用户的持有者令牌就会过期，我调用auth/refresh，而不是强制他们重新登录。这很痛苦，因为我需要在每次调用时检查401 error。有没有办法使用redux/redux-thunk在一个地方检查这个错误，而不是在每个调用中？

我有一个额外的问题，如果发生多个调用，每次都会调用相同的刷新，因此我最终会多次刷新承载令牌！

我刷新auth标记的操作：

export const refreshAuth = () => {
  return (dispatch, getState) => {
    return axios.post(API.path + 'auth/refresh/?' + API.beaconAPI_client, { 'refreshToken': getState().login.refreshToken })
    .then(response => {
        dispatch({
            type: DO_LOGIN_REFRESH,
            userDetails: response.data
        })
    })
}

}

使用Axios，如果发生错误，我会这样做：

.catch(error => {
  if(error.response.status === 401){
    this.props.refreshAuth()
    .then(response => {
        /* In the response, make the request again after auth is refreshed */
    })
  }
})

Answer 1

您可以使用Axios interceptors将这些处理程序放在一个位置。

axios.interceptors.response.use(null, error => {
  switch (error.response.status) {
    case 401:
    // [Unauthorized] - Wrong or no authentication ID/password provided
    store.dispatch(actionToRefreshToken());
    break;
  default:
    ...
}