时间戳

首页 > 解决方案 > 处理 axios react-redux 应用程序中的 401 未授权错误

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

问题描述

我想在我的服务器输出它时处理 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})
        }


    }

};

标签： reactjsexpressreduxaxiosredux-thunk

解决方案

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

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

可以在此处找到有关其用法的文档。

在您的情况下，您可以执行以下操作：

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 存储实例来直接调度一个动作。

根据以下对话编辑了我的答案：

尝试：

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})
  }
};

推荐阅读