React+Express开发中：Cookie应存储在前端还是后端？

一、Cookie 的存储位置 #

Cookie 必须由后端（Express）设置，绝对不能通过前端代码直接存储——前端虽能读取非HttpOnly的Cookie，但手动设置会大幅降低安全性，极易被XSS攻击窃取会话信息。

具体流程：

• 用户登录时，前端调用登录API（如POST /api/login），传递账号密码。
• 后端验证通过后，生成唯一会话标识（比如Session ID或加密后的JWT），通过Set-Cookie响应头将Cookie发送给浏览器。
• 浏览器会自动保存该Cookie，后续所有同域请求都会自动携带它，无需前端手动处理。

示例Express代码：

// 登录路由实现
app.post('/api/login', (req, res) => {
  // 省略用户账号密码验证逻辑
  const validUserId = 1001;
  // 生成安全的会话ID（可借助uuid库生成）
  const sessionId = 'xxxx-xxxx-xxxx-xxxx';
  
  // 设置Cookie的安全属性
  res.cookie('sessionId', sessionId, {
    httpOnly: true, // 禁止前端JS读取，防XSS
    secure: process.env.NODE_ENV === 'production', // 生产环境仅HTTPS传输
    sameSite: 'strict', // 防CSRF攻击
    maxAge: 24 * 60 * 60 * 1000 // 有效期1天
  });
  res.json({ success: true, msg: '登录成功' });
});

二、会话验证与私有路由保护 #

1. 后端验证逻辑 #

写一个全局中间件，对所有私有API请求做Cookie有效性校验：

// 会话验证中间件
const checkAuth = (req, res, next) => {
  const sessionId = req.cookies.sessionId;
  // 从数据库/Redis中查询该sessionId对应的有效用户
  const validUser = getUserBySessionId(sessionId);
  
  if (!sessionId || !validUser) {
    return res.status(401).json({ msg: '未授权，请登录' });
  }
  // 将用户信息挂载到req对象，供后续路由使用
  req.user = validUser;
  next();
};

// 私有路由示例
app.get('/api/user/info', checkAuth, (req, res) => {
  res.json({ userInfo: req.user });
});

2. 前端React的处理 #

• 请求层面：浏览器会自动携带同域Cookie，无需前端手动拼接。可封装请求拦截器，处理后端返回的401状态码，比如跳转到登录页：

import axios from 'axios';

// 响应拦截器
axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 401) {
      window.location.href = '/login';
    }
    return Promise.reject(err);
  }
);

• 路由层面：写一个路由守卫组件，进入私有路由前先调用验证API确认会话有效性：

import { Navigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import axios from 'axios';

const PrivateRoute = ({ children }) => {
  const [isAuth, setIsAuth] = useState(null);

  useEffect(() => {
    const verifyAuth = async () => {
      try {
        await axios.get('/api/auth/check');
        setIsAuth(true);
      } catch {
        setIsAuth(false);
      }
    };
    verifyAuth();
  }, []);

  if (isAuth === null) {
    return <div>加载中...</div>;
  }

  return isAuth ? children : <Navigate to="/login" />;
};

// 使用示例
<Route path="/profile" element={<PrivateRoute><ProfilePage /></PrivateRoute>} />

三、核心安全注意事项 #

• 强制开启httpOnly属性，杜绝前端JS读取Cookie的可能，防范XSS攻击。
• 生产环境必须开启secure属性，确保Cookie仅通过HTTPS传输。
• 设置SameSite为strict或lax，降低CSRF攻击风险。
• 会话标识要足够随机且长度充足，避免被暴力猜测。

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