React中如何删除浏览器Cookie？登出时Token Cookie删除失败问题

开发者阿泽

2026-8-24

解决登出时Token Cookie无法删除及Cookie.get()返回空的问题

问题核心原因

Cookie删不掉、Cookie.get()返回空但浏览器还能看到，本质是删除时的参数和创建Cookie时的参数不匹配。js-cookie删除Cookie必须和创建时的path、domain、secure等属性完全一致，否则找不到目标Cookie；而Cookie.get()只能获取和当前页面环境匹配的Cookie（同路径、同域名），浏览器显示的是所有Cookie，所以会出现「浏览器可见但get()拿不到」的矛盾情况。

具体解决方案

匹配创建参数删除Cookie
先确认你设置token时的代码，比如当初可能是这么创建的：

Cookie.set('token', 'xxx', {
  path: '/',
  domain: 'your-domain.com', // 若设置过域名需带上
  secure: true // 若开启了secure需带上
});

那删除时必须把这些参数全部补上，修改后的logout函数：

function logout() {
  localStorage.clear();
  // 严格匹配创建时的参数
  Cookie.remove('token', {
    path: '/',
    // domain: 'your-domain.com', // 有则加
    // secure: true // 有则加
  });
  console.log(Cookie.get(), "Oooooooooooooo");
  navigate("/login");
}

原生API兜底删除
如果js-cookie还是没效果，直接用原生document.cookie强制删除：

function logout() {
  localStorage.clear();
  // 强制过期删除，path要和创建时一致，有domain/secure也要加上
  document.cookie = "token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
  // 带域名的情况：document.cookie = "token=; path=/; domain=your-domain.com; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
  // 带secure的情况：document.cookie = "token=; path=/; secure; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
  console.log(Cookie.get(), "Oooooooooooooo");
  navigate("/login");
}