React中如何将Login组件Axios请求的res.data传递给Header组件

你当前的核心问题是登录成功后获取的first_name需要从Login组件传递到外层的Header组件展示，同时你的前端登录逻辑存在一个小bug：后端登录成功返回的是用户名字，但前端判断的是res.data.includes('Login successful')，这会导致跳转逻辑永远不会触发，得先修正这个问题。

下面给你两种可行的前端跨组件传值方案：

方案一：使用React Context（推荐，适合全局共享用户状态） #

React Context可以让你在组件树中共享状态，无需逐层传递props，非常适合用户信息这种全局需要的状态。

1. 创建UserContext #

新建一个UserContext.js文件：

import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState(null); // 初始为null，表示未登录

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// 自定义hook，简化Context调用
export function useUser() {
  return useContext(UserContext);
}

2. 在根组件中包裹UserProvider #

修改你的根组件（包含Header和Routes的那个组件）：

import { UserProvider } from './UserContext';

function App() {
  return (
    <UserProvider>
      <Header />
      
      <Routes>
        <Route path="/" element={<Index />}/>
        <Route path="/results/:id" element={<Results />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/users" element={<Users />}/>
        <Route path="/products" element={<Products />}/>
        <Route path="*" element={<Error />}/>
      </Routes>
      <Footer />
    </UserProvider>
  );
}

3. 在Login组件中更新用户状态 #

修改Login组件的Axios请求逻辑，同时修正后端返回值的判断问题：

import { useUser } from './UserContext';
import { useNavigate } from 'react-router-dom';

function Login() {
  const { setUser } = useUser();
  const navigate = useNavigate();
  // ...你的其他状态，比如email、password、error

  const handleLogin = () => {
    axios.post('http://localhost:8080/users/validate', {
        email: email,
        password: password,
    })
    .then((res) => {
      // 判断返回的是否是用户名字（排除错误提示字符串）
      if (typeof res.data === 'string' && !res.data.includes('Incorrect') && !res.data.includes('incorrect')) {
        // 登录成功，保存用户名字到Context
        setUser(res.data);
        navigate('/');
      } else {
        // 登录失败，设置错误提示
        setError(res.data);
      }
    })
    .catch(err => {
      setError('登录请求失败，请稍后重试');
    });
  };

  // ...组件其他代码
}

4. 在Header组件中获取并展示用户信息 #

import { useUser } from './UserContext';

function Header() {
  const { user } = useUser();

  return (
    <header>
      {/* 其他Header内容 */}
      {user ? <span>欢迎回来，{user}</span> : <span>请登录</span>}
    </header>
  );
}

方案二：提升状态到父组件（适合简单场景） #

如果你的应用层级不复杂，可以把用户状态提升到包含Header和Routes的父组件中：

1. 父组件中定义状态并传递props #

import { useState } from 'react';

function App() {
  const [user, setUser] = useState(null);

  return (
    <>
      <Header user={user} />
      
      <Routes>
        <Route path="/" element={<Index />}/>
        <Route path="/results/:id" element={<Results />} />
        <Route path="/login" element={<Login setUser={setUser} />} />
        {/* 其他路由 */}
      </Routes>
      <Footer />
    </>
  );
}

2. Login组件中调用setUser #

import { useNavigate } from 'react-router-dom';

function Login({ setUser }) {
  const navigate = useNavigate();
  // ...你的其他状态，比如email、password、error

  const handleLogin = () => {
    axios.post('http://localhost:8080/users/validate', {
        email: email,
        password: password,
    })
    .then((res) => {
      if (typeof res.data === 'string' && !res.data.includes('Incorrect') && !res.data.includes('incorrect')) {
        setUser(res.data);
        navigate('/');
      } else {
        setError(res.data);
      }
    });
  };

  // ...其他代码
}

3. Header组件中接收user props #

function Header({ user }) {
  return (
    <header>
      {/* 其他内容 */}
      {user ? <span>欢迎回来，{user}</span> : <span>请登录</span>}
    </header>
  );
}

额外建议：优化后端返回格式 #

当前后端直接返回字符串的方式不够健壮，建议返回JSON格式的数据，比如：

// 登录成功时
res.json({ success: true, firstName: rows[0].first_name });
// 登录失败时
res.json({ success: false, message: 'Incorrect password' });

这样前端可以更清晰地判断状态：

.then((res) => {
  if (res.data.success) {
    setUser(res.data.firstName);
    navigate('/');
  } else {
    setError(res.data.message);
  }
})

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