基于React和Node的电商应用登录后用户信息获取方法咨询

后端（Node）核心流程 #

• 登录验证通过后，生成JWT令牌或设置HttpOnly Session Cookie（StackOverflow这类站点更偏向后者，能降低XSS风险），令牌/Session中只存用户唯一标识（比如userId），绝对不要放密码这类敏感数据。
• 提供专属接口（比如GET /api/user/profile），接口先校验请求的合法性：
  • 用JWT的话：解析请求头Authorization: Bearer <token>，验证签名后提取userId
  • 用Session的话：通过req.session.userId直接获取（前提是你用了express-session这类中间件）
• 拿到userId后，去数据库查询对应用户的非敏感信息（用户名、头像、权限等），返回给前端时一定要排除密码字段。

极简Node代码示例 #

// Express + JWT 示例
const jwt = require('jsonwebtoken');
const User = require('../models/User');

// 登录接口：验证成功发令牌
app.post('/api/auth/login', async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findOne({ email });
  if (!user || !await user.verifyPassword(password)) {
    return res.status(401).json({ msg: '账号或密码错误' });
  }
  // 生成包含userId的JWT，有效期7天
  const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' });
  res.json({ token });
});

// 获取用户信息接口
app.get('/api/user/profile', async (req, res) => {
  try {
    const authHeader = req.headers.authorization;
    if (!authHeader) return res.status(401).json({ msg: '未授权' });
    const token = authHeader.split(' ')[1];
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    // 查询用户并排除密码字段
    const user = await User.findById(decoded.userId).select('-password');
    res.json(user);
  } catch (err) {
    res.status(401).json({ msg: '令牌无效或已过期' });
  }
});

前端（React）核心流程 #

• 登录成功后，把后端返回的JWT存在localStorage/sessionStorage（如果是Session Cookie，浏览器会自动携带，不用手动存储）
• 在需要展示用户信息的组件（比如个人中心、首页导航栏），发送GET请求到用户信息接口，请求头带上令牌：

极简React组件示例 #

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const fetchUserInfo = async () => {
      const token = localStorage.getItem('authToken');
      const res = await fetch('/api/user/profile', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
      if (res.ok) {
        const data = await res.json();
        setUser(data);
      } else {
        // 未授权时跳回登录页
        window.location.href = '/login';
      }
    };
    fetchUserInfo();
  }, []);

  if (!user) return <div>加载中...</div>;
  return (
    <div className="user-profile">
      <h2>欢迎回来，{user.username}</h2>
      <p>邮箱：{user.email}</p>
      <p>会员等级：{user.level}</p>
    </div>
  );
}

export default UserProfile;

类似StackOverflow的数据库交互逻辑 #

本质和上面的流程一致，只是做了更多性能和安全优化：

1. 登录后服务器设置HttpOnly、Secure属性的Session Cookie，浏览器后续请求会自动携带这个Cookie
2. 服务器通过Cookie里的Session ID，从Redis（内存缓存）或数据库中找到对应的用户ID
3. 优先从Redis读取用户常用信息（比如用户名、头像、积分），缓存失效时再查MySQL，大幅降低数据库压力
4. 查询到用户信息后，组装成页面需要的数据（比如用户的提问、回答记录），返回给前端渲染

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