如何在React.js中捕获API响应数据并对接Spring Boot登录接口

核心实现步骤 #

1. 基础状态管理与表单绑定 #

用React的useState管理输入值、登录结果和错误信息，结合原生Fetch实现API调用：

import { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loginResult, setLoginResult] = useState('');
  const [error, setError] = useState('');

  // 输入框值绑定
  const handleUsernameChange = (e) => setUsername(e.target.value);
  const handlePasswordChange = (e) => setPassword(e.target.value);

  // 登录提交逻辑
  const handleLogin = async (e) => {
    e.preventDefault();
    setError('');
    setLoginResult('');

    try {
      const response = await fetch('http://localhost:8080/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password }),
      });

      if (!response.ok) throw new Error('请求失败，请检查接口或网络');

      const data = await response.json();
      // 适配接口返回的两种情况：纯文本提示或用户详情
      if (data === '登录成功' || data.userInfo) {
        const tip = data === '登录成功' ? '登录成功' : `欢迎回来，${data.userInfo.username}`;
        setLoginResult(tip);
        // 登录成功后持久化用户数据（按需选择）
        if (data.userInfo) {
          localStorage.setItem('currentUser', JSON.stringify(data.userInfo));
        }
      } else {
        setLoginResult('登录失败');
      }
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div className="login-box">
      <form onSubmit={handleLogin}>
        <div>
          <label>用户名：</label>
          <input type="text" value={username} onChange={handleUsernameChange} required />
        </div>
        <div>
          <label>密码：</label>
          <input type="password" value={password} onChange={handlePasswordChange} required />
        </div>
        <button type="submit">登录</button>
      </form>

      {/* 展示结果或错误 */}
      {loginResult && <p className="login-tip">{loginResult}</p>}
      {error && <p className="error-tip">{error}</p>}
    </div>
  );
}

export default LoginForm;

2. 用Axios简化请求（可选） #

如果项目已引入axios，可以替换Fetch逻辑，简化错误处理：

// 先安装依赖：npm install axios
import axios from 'axios';

// 替换handleLogin函数
const handleLogin = async (e) => {
  e.preventDefault();
  setError('');
  setLoginResult('');

  try {
    const response = await axios.post('http://localhost:8080/api/login', { username, password });
    const data = response.data;
    
    if (data === '登录成功' || data.userInfo) {
      const tip = data === '登录成功' ? '登录成功' : `欢迎回来，${data.userInfo.username}`;
      setLoginResult(tip);
      data.userInfo && localStorage.setItem('currentUser', JSON.stringify(data.userInfo));
    } else {
      setLoginResult('登录失败');
    }
  } catch (err) {
    setError(err.response?.data || '登录请求失败');
  }
};

3. 解决跨域问题 #

React开发服务器（默认3000端口）与Spring Boot（默认8080端口）存在跨域，需在Spring Boot端配置：

• 方法1：在登录接口Controller方法上添加注解：

@RestController
@RequestMapping("/api")
public class LoginController {
  @CrossOrigin(origins = "http://localhost:3000")
  @PostMapping("/login")
  public Object login(@RequestBody UserLoginRequest request) {
    // 原有登录逻辑，返回"登录成功"/"登录失败"或用户详情
  }
}

• 方法2：全局跨域配置（推荐）：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000")
            .allowedMethods("GET", "POST")
            .allowedHeaders("*")
            .allowCredentials(true);
  }
}

4. 全局状态扩展（可选） #

如果需要在全项目共享登录状态，可创建AuthContext：

// AuthContext.js
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(JSON.parse(localStorage.getItem('currentUser')));

  const login = (userInfo) => {
    setCurrentUser(userInfo);
    localStorage.setItem('currentUser', JSON.stringify(userInfo));
  };

  const logout = () => {
    setCurrentUser(null);
    localStorage.removeItem('currentUser');
  };

  return (
    <AuthContext.Provider value={{ currentUser, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

之后在登录组件中调用useAuth().login(userInfo)即可全局同步登录状态。

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