如何仅用Express和React实现后端向前端传递认证用户数据？

你遇到的自定义请求头无法获取的问题，本质是重定向会触发浏览器发起新请求，原响应的自定义头不会被带到新请求中。下面是几个仅用Express和React就能实现的方案：

方案1：通过URL查询参数传递（适合非敏感数据） #

直接把用户标识拼在重定向的URL参数里，React端解析URL即可获取：

后端修改重定向代码 #

const { code } = req.query;
if (code) {
    try {
        // ... 原有认证逻辑不变 ...
        const newUser = await createUser(buildUser(user, credentials));
        // 把discordId拼到重定向URL的查询参数中
        res.redirect(`http://localhost:3000?discordId=${encodeURIComponent(newUser.discordId)}`);
    } catch (err) {
        console.log(err);
        res.sendStatus(400);
    }
}

React端获取参数 #

如果用React Router，可以用useLocation钩子；不用的话直接解析window.location.search：

// 用React Router的写法
import { useLocation } from 'react-router-dom';

function HomePage() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const discordId = params.get('discordId');

  // 拿到ID后可以发起请求获取完整用户信息
  return <div>认证成功，你的Discord ID：{discordId}</div>;
}

// 不用React Router的写法
function getDiscordIdFromUrl() {
  const params = new URLSearchParams(window.location.search);
  return params.get('discordId');
}

⚠️ 注意：查询参数会暴露在URL中，不要传递敏感数据（比如token）。

方案2：使用HTTP Only Cookie存储（推荐，安全） #

把用户标识存在HTTP Only的Cookie中，React后续发起API请求时自动携带Cookie，后端验证后返回用户数据：

后端设置Cookie并重定向 #

const { code } = req.query;
if (code) {
    try {
        // ... 原有认证逻辑不变 ...
        const newUser = await createUser(buildUser(user, credentials));
        // 设置HTTP Only Cookie
        res.cookie('discordUserId', newUser.discordId, {
          httpOnly: true, // 防止前端JS读取，提升安全性
          secure: process.env.NODE_ENV === 'production', // 生产环境强制HTTPS
          sameSite: 'lax', // 防止CSRF
          maxAge: 24 * 60 * 60 * 1000 // 有效期1天
        });
        res.redirect('http://localhost:3000');
    } catch (err) {
        console.log(err);
        res.sendStatus(400);
    }
}

React端通过API获取用户信息 #

配置axios允许携带凭证，发起请求到后端获取用户数据：

// React中配置axios
import axios from 'axios';

axios.defaults.withCredentials = true; // 全局开启携带Cookie

// 组件中请求用户信息
useEffect(() => {
  axios.get('http://localhost:5000/api/current-user')
    .then(res => {
      console.log('当前用户:', res.data);
      // 把用户信息存到state或全局状态管理中
    })
    .catch(err => {
      console.log('未认证:', err);
    });
}, []);

后端API接口（获取当前用户） #

app.get('/api/current-user', async (req, res) => {
  const discordId = req.cookies.discordUserId;
  if (!discordId) {
    return res.sendStatus(401); // 未认证
  }
  // 从数据库查询完整用户信息
  const user = await getUserByDiscordId(discordId);
  res.json(user);
});

方案3：使用Express Session临时存储（适合多数据场景） #

如果需要传递较多用户数据，可以用session把数据存在服务器端，React端通过session ID（自动存在Cookie中）获取数据：

后端配置Session并存储数据 #

首先安装express-session：npm install express-session

const session = require('express-session');

// 配置session中间件
app.use(session({
  secret: 'your-strong-secret-key', // 生产环境用环境变量存储
  resave: false,
  saveUninitialized: false,
  cookie: {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    maxAge: 10 * 60 * 1000 // 10分钟有效期，避免数据冗余
  }
}));

// 认证成功后存数据到session
const { code } = req.query;
if (code) {
    try {
        // ... 原有认证逻辑不变 ...
        const newUser = await createUser(buildUser(user, credentials));
        req.session.user = newUser; // 把完整用户数据存到session
        res.redirect('http://localhost:3000');
    } catch (err) {
        console.log(err);
        res.sendStatus(400);
    }
}

React端请求Session中的用户数据 #

// React组件中
useEffect(() => {
  axios.get('http://localhost:5000/api/session-user', { withCredentials: true })
    .then(res => {
      console.log('用户信息:', res.data);
      // 可选：获取后清除session数据，防止重复获取
      axios.post('http://localhost:5000/api/clear-session');
    })
    .catch(err => {
      console.log('获取失败:', err);
    });
}, []);

后端对应API #

// 获取session中的用户数据
app.get('/api/session-user', (req, res) => {
  if (!req.session.user) {
    return res.sendStatus(401);
  }
  res.json(req.session.user);
});

// 清除session数据
app.post('/api/clear-session', (req, res) => {
  delete req.session.user;
  res.sendStatus(200);
});

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