React中js-cookie调用remove方法无法删除Cookie问题

核心问题原因 #

你遇到的删除失效问题和使用的库（js-cookie/react-cookies）无关，这两类库本质都是对原生document.cookie API的封装，删除失败90%以上是以下两个原因：

• Cookie属性不匹配：删除Cookie时传入的path/domain/secure/sameSite属性，必须和设置Cookie时的属性、浏览器DevTools中记录的Cookie属性完全一致，缺一个、值错一个都会导致删除无效
• 闭包缓存旧值：你代码里的getTheCookie是初始化时取的Cookie静态值，后续Cookie变更不会同步更新这个变量，会导致判断逻辑失效

排查&修复步骤 #

1. 先打开浏览器开发者工具，进入「Application」-「Cookies」对应你的站点域名，找到NameOfMyCookie条目，逐一记录下它的Path/Domain/Secure/SameSite/HttpOnly属性值

   注意：如果HttpOnly列打勾，说明这个Cookie是后端通过Set-Cookie头种下的，前端JS无任何权限修改/删除，这类Cookie必须调用后端退出接口由服务端清除

2. 修正登录逻辑，设置Cookie时显式写全所有需要的属性，不要依赖默认值，避免不同环境下默认属性不一致：

await axios
  .post(URL, { email: usuario, password: password })
  .then((retorno) => {
    if (retorno.data.token) {
      // 这里的配置请和你DevTools里看到的最终Cookie属性保持一致
      const cookieOptions = { 
        path: "/",
        // 线上https环境打开，本地http环境不要加
        // secure: true,
        // 根据业务需求配置，和删除时保持一致即可
        // sameSite: 'lax',
        // 多子域场景再配置，本地开发不要加
        // domain: 'yoursite.com'
      };
      Cookies.set('NameOfMyCookie', retorno.data.token, cookieOptions);
      setToken(retorno.data.token);
      // 确认Cookie写入完成再跳转
      window.location.href = link;
    }
    if (retorno.data.error) {
      Swal.fire({
        icon: "error",
        title: retorno.data.error,
        confirmButtonColor: theme.palette.primary.main,
      });
      return;
    }
  });

3. 修正退出逻辑，不要用闭包缓存的旧Cookie值做判断，删除时传入和设置时完全一致的属性，删除后同步清空状态：

const logout = () => {
  // 每次退出实时读取当前Cookie值，不要用之前缓存的getTheCookie变量
  const currentToken = Cookies.get('NameOfMyCookie');
  if (currentToken) {
    // 传入和set时完全一致的配置项，一个都不能少、不能错
    Cookies.remove("NameOfMyCookie", {
      path: "/",
      // secure: true,
      // sameSite: 'lax',
      // domain: 'yoursite.com'
    });
    setToken(null);
    // 清空后刷新页面/重定向，避免前端路由缓存旧状态
    window.location.href = '/login';
  }
};

常见踩坑点 #

• 本地开发环境（localhost）不要传domain配置，否则会找不到对应Cookie
• 设置Cookie时没传的属性，删除时也不要额外加，比如set的时候没传domain，remove的时候硬加domain: 'yoursite.com'一定会删除失败
• 如果存在前后端同名Cookie的情况，先确认你要删的是不是前端可控的非HttpOnly Cookie

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