Vue.js + Nuxt.js实现关闭浏览器不删Cookie，仅登出时清除

Nuxt 3 实现方式 #

• 设置持久化Cookie：
  在组件或自定义组合式函数里，用Nuxt内置的useCookie方法，指定expires（具体过期时间）或maxAge（存活秒数）属性，就能让Cookie被持久化存储，不会随浏览器关闭而自动删除。
  示例代码：

  // 设置登录状态Cookie，有效期7天
  const userToken = useCookie('user_token', {
    expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
    secure: process.env.NODE_ENV === 'production', // 生产环境建议开启
    sameSite: 'strict'
  })
  
  // 登录成功后赋值
  userToken.value = 'your_auth_token_here'
  

• 登出时清除Cookie：
  执行登出操作时，直接把Cookie的值设为null，浏览器就会删除该Cookie。
  示例代码：

  const logout = () => {
    const userToken = useCookie('user_token')
    userToken.value = null
    // 后续登出逻辑，比如跳转到登录页
    navigateTo('/login')
  }
  

Nuxt 2 实现方式 #

1. 先安装依赖：

   npm install js-cookie --save
   

2. 设置持久化Cookie：
   在登录逻辑中，调用Cookies.set()并传入expires参数指定有效期，这样Cookie就不会随浏览器关闭消失。
   示例代码：

   import Cookies from 'js-cookie'
   
   // 登录成功后设置Cookie，有效期7天
   Cookies.set('user_token', 'your_auth_token_here', {
     expires: 7, // 单位为天
     secure: process.env.NODE_ENV === 'production',
     sameSite: 'strict'
   })
   

3. 登出时清除Cookie：
   调用Cookies.remove()方法删除目标Cookie即可。
   示例代码：

   import Cookies from 'js-cookie'
   
   const logout = () => {
     Cookies.remove('user_token')
     // 跳转登录页等后续操作
     this.$router.push('/login')
   }
   

注意事项 #

• secure属性：生产环境建议开启，确保Cookie仅通过HTTPS传输，提升安全性。
• sameSite属性：设置为strict或lax可有效防范CSRF攻击，根据业务需求调整即可。
• 有效期可灵活设置：比如设为30天甚至更长，只要在用户主动登出时手动清除Cookie就符合需求。

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