Reactjs（Next.js框架）中登出时如何删除Cookie？

客户端删除Cookie（基于js-cookie库） #

你添加Cookie用的是Cookies.set('email', email)，说明使用的是js-cookie库，登出时直接调用Cookies.remove()方法即可：

Cookies.remove('email');

• 关键注意：如果当初设置Cookie时指定了path或domain参数，删除时必须传入完全一致的参数才能成功删除，例如：

  // 当初设置Cookie时指定了路径
  Cookies.set('email', email, { path: '/' });
  // 删除时必须匹配相同路径
  Cookies.remove('email', { path: '/' });
  

服务端删除Cookie（API路由/SSR场景） #

如果是在Next.js的API路由、getServerSideProps这类服务端环境中，需要通过响应头手动设置Cookie过期来实现删除：

// 示例：API路由中处理登出
export default function handler(req, res) {
  // 设置Cookie过期，Path需与原Cookie路径一致
  res.setHeader('Set-Cookie', [
    'email=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT; HttpOnly'
  ]);
  res.status(200).json({ message: '登出成功' });
}

• 补充说明：如果原Cookie带有HttpOnly或Secure属性，删除时的响应头也要对应带上这些属性；Path必须与设置Cookie时的路径完全匹配，否则无法定位并删除目标Cookie。

额外提示 #

• 登出逻辑执行后，记得同步清除客户端的用户状态（比如全局状态管理中的用户信息），避免页面显示与实际登录状态不一致。

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