登录功能Toast消息错误场景始终显示正标记问题求助

问题现象：登录时Toast消息文本能正常展示，但无论登录成功还是失败，始终显示成功样式的正标记，期望失败场景显示错误样式的叉号。

问题原因 #

前端代码中，当后端返回success: false（登录失败场景）时，错误调用了toast.success()方法，导致失败场景仍使用成功样式。

修复代码 #

将前端onFinish函数else分支里的toast.success替换为toast.error即可：

const navigate = useNavigate();
const onFinish = async(values)=>{
  try {
    const response = await axios.post('/api/user/login', values);
    if(response.data.success)
    {
        toast.success(response.data.message);
        toast("Redirecting to home page.");
        localStorage.setItem("token", response.data.data);
        navigate("/");
    }
    else{
      // 改为toast.error，对应错误样式的叉号
      toast.error(response.data.message);
    }
  } catch (error) {
     toast.error("something went wrong");
  }
}

逻辑验证 #

后端已正确在登录失败（用户不存在、密码错误、服务端异常）时返回success: false，修改前端Toast调用方法后，样式将正确匹配场景：

• 登录成功：调用toast.success显示正标记
• 登录失败（后端返回success: false）：调用toast.error显示叉号
• 请求异常：调用toast.error显示叉号

内容的提问来源于stack exchange，提问作者Himanshu Prem