Question

当服务器端res.status(403).json({ fail: "Login failed" });上的登录失败时，来自服务器端的消息将传递到前端setHelperText(failMessage);中，我如何在前端获得“登录失败”消息？

它在chrome控制台中显示错误>>错误：请求失败，状态码为403 在createError（createError.js：16）在解决时（settle.js：17）

server.js

app.post('/service/login', async (req, res) => {
  try {
    const userEmail = req.body.email;
    const userPassword = req.body.password;
    const loginData = await UserModel.findAll({ where: { email: userEmail} });
    const password = loginData[0].password;
    const email = loginData[0].email;
    if(password === userPassword && email === userEmail){
     const privilege  = loginData[0].privilege;
      res.status(200).json({ success: true, privilege, email });
    }else{
      res.status(403).json({ fail: "Login failed" });
    }
  } catch (e) {
    res.status(500).json({ message: e.message });
  }
});

Login.js

const fetchData = async () => {
  try {
    const res = await axios.post('http://localhost:8000/service/login', { email , password });
    console.log("Front End success message:"+res.data.success);
    if(res.data.success){
      setHelperText("Login successfully");
      setValue(res.data.privilege);
      setError(true);
    }
    else{
      const failMessage = res.data.fail;
      setHelperText(failMessage);
    }
  } catch (e) {
    console.log(e);
  }
}

Answer 1

如果响应不成功（在您的情况下为403），将执行catch块，因此将您的逻辑移到else块内以在Login.js中捕获块

catch(e) {      
const failMessage = e.response.data.fail;
setHelperText(failMessage);
// console.log(e.data.response); -> to print the server response
}

来自服务器端的错误消息未显示在前端

1 个答案: