处理 axios react-redux 应用程序中的 401 未授权错误

Question

我想在我的服务器输出时处理 401 未经授权的错误，我想为此发送一个操作。我看到很多人都在使用 axios.interceptors 我该怎么做。什么是拦截器？请详细解释它是什么并帮助我。我是 react-redux 框架的新手。这是我的快递路线处理程序：

router.get('/api/me', function(req, res) {

        if(req.user) {
            res.status(200).send({
                email : req.user.local.email,
                isCurrentUser: true
            });
        }else {
            res.status(401).send({
                isCurrentUser: false
            })
        }



})

这是我的异步操作创建者：

export const fetchCurrentUser =  () => {

    return async (dispatch) => {

        const res =  await axios.get(`${ROOT_URL}/me`); 
        if(res.status === 200) {
              dispatch({ type: types.YES_FETCH_CURRENT_USER, payload: res.data });
        }else if(res.status === 401) {
             dispatch({type: types.NO_FETCH_CURRENT_USER})
        }


    }

};

Answer 1

拦截器在 axios 内。您可以将拦截器与 express 中的中间件进行比较。您使用拦截器

在执行之前拦截请求。
在您将其作为 Promise 处理之前拦截响应。

可以找到有关其用法的文档 here。

在你的情况下，你可以这样做：

const aiosInstance = axios.create();

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      // dispatch something to your store
    }

    return Promise.reject(error);
  }
)

axiosInstance.get(`${ROOT_URL}/me`);

上面的例子确实意味着你必须导入你的 redux store 实例来直接调度一个动作。

已编辑 我的回答基于以下对话：

尝试：

export const fetchCurrentUser =  () => async (dispatch) => {
  try {
    const res = await axios.get(`${ROOT_URL}/me`); 

    dispatch({ type: types.YES_FETCH_CURRENT_USER, payload: res.data });
  } catch (err) {
    dispatch({type: types.NO_FETCH_CURRENT_USER})
  }
};

处理 axios react-redux 应用程序中的 401 未授权错误

Handling 401 unauthorised error in axios react-redux application

express

reactjs

redux

redux-thunk

axios