Express.js页面刷新后JWT Token从Cookie消失问题求助

针对你遇到的「登录后JWT Token在刷新页面后消失、无法持久化存储」的问题，结合代码片段分析出以下核心问题及修复方案：

1. 后端Cookie解析的语法错误 #

你的verifyToken中间件存在低级错误：req.cookie?.token应改为req.cookies?.token。Express的cookie-parser中间件会将解析后的Cookie存储在复数形式的req.cookies对象中，单数的req.cookie并不存在，这会导致后端始终无法读取到Token，进而触发403错误。

修复后的verifyToken代码：

const verifyToken = async (req, res, next) => {
  // 修正为 req.cookies
  const token = req.cookies?.token
  console.log("verified token :", token);
  
  if(!token) {
    return res.status(403).send({ message:"unauthorize" })
  }
  jwt.verify(token, process.env.BUCKET_TOKEN,(err, decoded) => {
    if(err){
      console.log("Access Denied :", err);
      return res.status(401).send({message:"Unauthorize User"})  
    }
    req.user = decoded 
    next()
  })
}

2. SameSite与Secure属性的不兼容配置 #

当设置sameSite: "None"时，浏览器强制要求Cookie必须同时设置secure: true，否则会拒绝持久化存储Cookie（跨域场景下此规则更为严格）。你当前的secure: false配置违反了这一规范，导致刷新页面后Cookie被浏览器自动清除。

环境适配配置： #

• 开发环境（HTTP协议）：将sameSite改为"Lax"或"Strict"，保持secure: false
• 生产环境（HTTPS协议）：必须同时设置sameSite: "None"和secure: true

修复后的Cookie配置示例（开发环境）：

res
  .cookie("token", token, {
    httpOnly: true,
    secure: false,
    sameSite: "Lax", // 修改为Lax适配开发环境
    maxAge: 3600000,
    path: '/'
  })
  .send({ success: "true", token });

3. 前端Axios未配置携带Credentials #

前端发送请求时，必须显式开启withCredentials: true，否则浏览器不会自动将Cookie附加到请求头中发送给后端。

全局配置Axios： #

import axios from 'axios';
axios.defaults.withCredentials = true;

单个请求配置： #

axios.get('/bookings', {
  params: { email: 'user@example.com' },
  withCredentials: true
});

4. JWT解码后的用户信息对比逻辑错误 #

在/bookings接口中，if(email !== req.user)的对比逻辑完全错误：你通过jwt.sign(user, ...)签名的user是一个对象（例如{ email: 'xxx@xxx.com' }），解码后的req.user同样是一个对象，直接与字符串类型的email对比永远不相等，会导致接口返回403禁止访问。

修复后的对比逻辑：

// 对比req.user中的email字段
if(email !== req.user.email) {
  return res.status(403).send({ message:"Forbidden" })
}

额外检查项 #

• 确认后端已正确挂载cookie-parser中间件：app.use(cookieParser())
• 检查浏览器控制台「Application > Cookies」面板，查看Cookie的Expires/Max-Age是否正确设置为1小时后
• 跨域场景下，确保后端CORS配置已允许携带Credentials：

  app.use(cors({
    origin: '你的前端域名',
    credentials: true // 必须开启此项
  }));
  

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