React登录组件如何校验fetch返回的resp数据判断账号密码是否正确

你不需要把resp拿到fetch回调外层做判断，所有校验、跳转、错误提示逻辑都可以直接写在请求成功的回调内，修改方案如下：

前置依赖说明 #

如果你使用react-router做路由管理，需要先导入对应跳转钩子：

• react-router v6 版本使用 useNavigate
• react-router v5 及更早版本使用 useHistory

修改后完整代码 #

import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; // v6版本导入，v5用import { useHistory } from 'react-router-dom'

function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState(""); // 修正原命名不规范问题
  const [errorMsg, setErrorMsg] = useState(""); // 错误提示状态
  const navigate = useNavigate(); // v6写法，v5用const history = useHistory()

  function login() {
    // 先做前端基础非空校验
    if(!email.trim() || !password.trim()) {
      setErrorMsg("账号和密码不能为空");
      return;
    }
    fetch(
      "http://116.202.231.219:8069/Restaurant/Login_Updated?Cont4=" +
        encodeURIComponent(email) + // 对参数编码避免特殊字符问题
        "&Pswd=" +
        encodeURIComponent(password)
    )
    .then((result) => result.json())
    .then((resp) => {
      // 直接在回调内做校验，不需要把resp抛出到外层
      // 这里判断逻辑根据你的接口实际返回结构调整，以下为示例：
      // 情况1：接口返回匹配到的用户数组，长度>0则匹配成功
      if(Array.isArray(resp) && resp.length > 0) {
        // 可选：和输入值二次比对
        const matchUser = resp.find(item => item.Cont4 === email && item.Pswd === password);
        if(matchUser) {
          // 可以把用户信息存入localStorage做登录态持久化
          localStorage.setItem('loginUser', JSON.stringify(matchUser));
          // 跳转逻辑 v6写法
          navigate('/dashboard');
          // v5写法：history.push('/dashboard')
          return;
        }
      }
      // 情况2：接口返回单个用户对象，判断resp是否为有效对象即可
      // if(resp && Object.keys(resp).length > 0) {
      //   navigate('/dashboard')
      //   return
      // }
      // 校验失败走错误提示
      setErrorMsg("账号或密码错误，请重新输入");
    })
    .catch(err => {
      // 捕获网络异常、接口报错等情况
      setErrorMsg("登录请求失败，请检查网络后重试");
      console.error("登录错误：", err);
    })
  }

  return (
    <div className="col-sm-6 offset-sm-3">
      <h1>Login Page</h1>
      <br />
      {/* 错误提示展示 */}
      {errorMsg && <div className="alert alert-danger mb-3">{errorMsg}</div>}
      <input
        type="text"
        className="form-control"
        placeholder="请输入账号"
        value={email} // 补充value绑定，受控组件规范
        onChange={(e) => setEmail(e.target.value)}
      />
      <br />
      <input
        type="password"
        className="form-control"
        placeholder="请输入密码"
        value={password} // 补充value绑定，受控组件规范
        onChange={(e) => setPassword(e.target.value)}
      />
      <br />
      <button onClick={login} className="btn btn-primary">
        Login
      </button>
    </div>
  );
}

其他注意事项 #

• 生产环境不要使用GET请求传输账号密码，参数会直接暴露在请求日志、浏览器历史中，建议改为POST请求将参数放在请求体中传输
• 原代码中users状态如果没有其他地方使用可以删掉，校验逻辑不需要依赖state存储的返回值
• 如果需要在组件其他地方访问登录返回的用户信息，可以将匹配到的用户存入state或者全局状态管理工具中

内容的提问来源于stack exchange，提问作者Ghulam Mustafa