如何在 React/Redux 中显示来自 Node/Express 的自定义错误消息？答案

【问题标题】：How to display custom error message from Node/Express in React/Redux?如何在 React/Redux 中显示来自 Node/Express 的自定义错误消息？
【发布时间】：2018-04-07 20:04:46
【问题描述】：

我正在使用 passportjs 进行用户身份验证，如果身份验证不成功，我想显示一条在客户端呈现的自定义错误消息（在本例中为 React/Redux）。

路线：

app.post(
    '/api/login',
    (req, res) => {
      passport.authenticate('local-login', (err, user, info) => {

        if (!user) return res.status(400).send({ msg: 'Please verify account first' });

      })(req, res);
    }
  );

动作创建者：

export const loginUser = (values, history) => async dispatch => {
  try {
    const res = await axios.post('/api/login', values);
    dispatch(deleteMessage());
    dispatch({ type: FETCH_USER, payload: res.data });
    history.push('/');
    window.Materialize.toast(`Welcome back ${res.data.local.email}!`, 4000);
  }
  catch(err) {
    console.log('Error:', err);
  }
}

但是，当我发现错误并在控制台将其注销时，我会收到标准状态 400 错误消息，而不是：{ msg: 'Please verify account first' }

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

有没有更好的方法来显示自定义错误消息？

【问题讨论】：

标签： node.js reactjs express redux passport.js

【解决方案1】：

从console.log(error) 修改为console.log(error.response) in 抓住。

参考：https://github.com/axios/axios/issues/960#issuecomment-309287911

【讨论】：

很有魅力！谢谢

【解决方案2】：

你必须在变量res的范围内，我建议采用以下方法（在.catch()之外）：

if(res.status === 400) {
  const error_msg = res.msg
  dispatch(loginError(error_msg))
}

【讨论】：

【解决方案3】：

console.log('Error:', err);

您也可以根据需要更改此错误消息。或者您是否希望来自服务器的响应 err 是 { msg: 'Please verify account first' }

【讨论】：

是的，我希望来自服务器的响应 err 是 { msg: 'Please verify account first' }