ReactJS登录页集成API实现密码校验后跳转注册页

需求说明 #

为登录页集成后端API接口：收集用户输入的邮箱、密码，将邮箱作为请求参数查询对应用户数据，完成密码匹配后跳转渲染注册页，排查现有代码逻辑问题。

原有前端代码 #

import React, { useState, useEffect } from "react";
import Axios from "axios";
import SignUp from './signup';


const Login = () =>  {

    const [products, setProducts] = useState([]);
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

  
  
    const handleSubmit = async () => {
        console.log("success0");
      const { data } = await Axios.get(
        "http://localhost:8080/api/login/"+email
      );
 
      let parseData = JSON.parse(data.response);
  
      setProducts(parseData);

     if(products.password==password){
     //render to sign up page
     }

    };


    return (
      <form onSubmit={handleSubmit} >
        <h3>Sign In</h3>
        <div className="mb-3">
          <label>Email</label>
          <input
            type="email"
          
            className="form-control"
            placeholder="Enter email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div className="mb-3">
          <label>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Enter password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div className="d-grid">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    )

}

export default Login;

相关效果参考 #

• 登录页界面：收集用户邮箱、密码输入
  
• API返回结构示例
  

现有代码逻辑问题 #

• 未阻止表单默认提交行为：onSubmit事件触发时没有调用e.preventDefault()，会触发页面默认刷新，中断后续逻辑执行
• 状态更新异步导致密码校验失效：React的setState是异步操作，调用setProducts(parseData)后立刻读取products.password拿到的是更新前的初始空值，密码匹配逻辑永远不会生效
• 缺少异常处理：接口请求失败、返回格式异常、用户不存在时代码会直接抛出错误，页面无任何提示
• 参数拼接风险：直接拼接邮箱到请求路径，未做编码处理，邮箱包含特殊字符时会导致请求路径异常
• 宽松相等校验风险：用==做密码比对存在隐式类型转换问题，有安全隐患
• 冗余代码：引入了未使用的useEffect，定义了不必要的products状态

修复后完整代码 #

import React, { useState } from "react";
import Axios from "axios";
import SignUp from './signup';


const Login = () =>  {
    const [loginSuccess, setLoginSuccess] = useState(false);
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [errorTip, setErrorTip] = useState("");

    const handleSubmit = async (e) => {
        e.preventDefault();
        setErrorTip("");
        try {
            const { data } = await Axios.get(
                `http://localhost:8080/api/login/${encodeURIComponent(email)}`
            );
            // 如果后端直接返回标准JSON格式，axios会自动解析，可省略JSON.parse步骤
            const userInfo = JSON.parse(data.response);
            
            // 直接用接口返回的最新数据做校验，避开state异步更新问题
            if(userInfo.password === password){
                setLoginSuccess(true);
                // 若使用react-router做路由管理，可替换为navigate('/signup')实现路由跳转
            } else {
                setErrorTip("密码错误，请重新输入");
            }
        } catch (err) {
            setErrorTip("登录失败，请检查账号信息或网络连接");
        }
    };

    // 校验通过直接渲染注册页
    if(loginSuccess) return <SignUp />;

    return (
      <form onSubmit={handleSubmit} >
        <h3>Sign In</h3>
        {errorTip && <div className="mb-3" style={{color: '#dc3545'}}>{errorTip}</div>}
        <div className="mb-3">
          <label>Email</label>
          <input
            type="email"
            className="form-control"
            placeholder="Enter email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div className="mb-3">
          <label>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Enter password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div className="d-grid">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    )
}

export default Login;

修复点说明 #

• 新增表单默认行为阻止，避免页面刷新
• 移除冗余依赖和无效状态，新增登录成功标记位，校验通过后直接渲染注册页组件
• 密码校验直接使用接口返回的最新数据，解决state异步更新导致的校验失效问题
• 新增try/catch异常捕获，增加错误提示，提升交互体验
• 请求参数增加URL编码处理，避免特殊字符导致请求异常
• 密码比对改用严格相等===，消除类型转换带来的风险

内容的提问来源于stack exchange，提问作者Divay Kumar