JWT过期后如何实现登出并清除Cookie？

嘿，你的问题很常见，JWT本身是无状态的，它的过期全靠自身的exp字段，所以清除Cookie这件事可以在客户端或者服务器端做，但最好是两端配合，这样更稳妥。我结合你的代码给你具体讲讲怎么实现：

一、客户端自动清除Cookie（最简单的方式） #

既然你的JWT有效期是15秒，那在客户端存储Cookie的时候，直接给Cookie设置相同的过期时间就好了——浏览器会自动在到期后把这个Cookie删掉，完全不用你手动写定时器。

修改你前端的登录代码：

import { Cookies } from "react-cookie";
const cookies = new Cookies();

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const url = "http://localhost:8080/api/auth";
    const { data: res } = await axios.post(url, data);
    
    // 创建一个15秒后过期的时间对象
    const cookieExpires = new Date();
    cookieExpires.setSeconds(cookieExpires.getSeconds() + 15);
    
    // 存储Cookie时指定过期时间，path设为/确保全站有效
    cookies.set('token', res.data, { 
      expires: cookieExpires,
      path: '/' 
    });
  } catch (error) {
    console.error("登录出错啦", error);
  }
};

这样设置后，浏览器会自动在15秒后清除token Cookie，完美匹配JWT的过期时间。

二、服务器端兜底清除Cookie（更可靠） #

有时候客户端可能因为页面休眠、缓存等问题，没自动清除过期的Cookie，这时候服务器端就要做兜底处理——在每次验证JWT的时候，如果发现token过期，就主动告诉浏览器清除Cookie。

首先你需要一个JWT验证的中间件，新建auth.js：

const jwt = require('jsonwebtoken');
const { User } = require('../models/User');

const auth = async (req, res, next) => {
  try {
    // 从Cookie里获取token（注意要先安装cookie-parser中间件，不然req.cookies拿不到值）
    const token = req.cookies.token;
    if (!token) {
      return res.status(401).send({ message: '请先登录' });
    }

    // 验证token，过期会直接抛出TokenExpiredError
    const decoded = jwt.verify(token, process.env.JWTPRIVATEKEY);
    const user = await User.findById(decoded._id);
    if (!user) {
      throw new Error('用户不存在');
    }

    req.user = user;
    next(); // 验证通过，继续执行后续路由
  } catch (error) {
    // 如果是token过期的错误，就清除Cookie
    if (error.name === 'TokenExpiredError') {
      res.clearCookie('token', { path: '/' }); // 告诉浏览器清除这个Cookie
      return res.status(401).send({ message: '登录已过期，请重新登录' });
    }
    res.status(400).send({ message: '无效的登录凭证' });
  }
};

module.exports = auth;

然后在需要验证登录的路由里使用这个中间件，比如用户信息接口：

const router = require('express').Router();
const auth = require('./auth'); // 引入刚才的中间件

// 需要登录才能访问的接口
router.get('/profile', auth, (req, res) => {
  res.send({ email: req.user.email, message: '获取用户信息成功' });
});

这样一来，只要客户端带着过期的token请求接口，服务器就会响应清除Cookie的指令，确保客户端的无效token被及时清理。

三、额外提醒：别忘了配置Cookie解析中间件 #

要让Express能读取到Cookie，你需要先安装cookie-parser：

npm install cookie-parser

然后在你的Express入口文件（比如app.js）里添加：

const cookieParser = require('cookie-parser');
app.use(cookieParser());

总结最佳实践 #

• 客户端优先：设置Cookie过期时间和JWT完全一致，让浏览器自动处理清除
• 服务器兜底：在验证token时检测过期，主动触发Cookie清除
• 两者结合，就能彻底解决JWT过期后Cookie残留的问题啦

备注：内容来源于stack exchange，提问作者Alexsander