Vue SPA+Pinia+JWT：如何通过Http-only Cookie跟踪登录状态

场景背景 #

Vue单页应用通过Axios调用Node Express API完成登录，验证通过后获取Http-only Cookie，该Cookie会自动随后续Axios请求发送至服务器，服务器响应结构固定如下：

{
  "status": {
    "error": false (or true),
    "msg": ""
  },
  "data": { "some data" }
}

1. 无法直接访问Http-only Cookie时，如何跟踪用户登录状态？ #

• 登录成功后，在前端全局状态（如Pinia、Vuex）中存储登录标记（如userLogged）及必要用户信息（昵称、权限等），这些信息从登录接口的data字段获取。
• 页面初始化或刷新时，调用登录状态校验接口（如/api/auth/check）：该接口会自动携带Http-only Cookie，服务器验证Cookie有效性后返回用户状态，前端根据响应更新全局状态，实现状态恢复。
• 核心原则：前端状态仅作展示和路由拦截的参考，关键操作（如提交敏感请求）必须依赖后端接口的响应结果确认状态。

2. 路由如何识别无效JWT Cookie并登出跳转？ #

• 利用Vue Router的全局前置守卫（beforeEach），针对标记了requiresAuth: true的路由（在路由元信息meta中配置）进行拦截校验：

  router.beforeEach(async (to, from, next) => {
    if (to.meta.requiresAuth) {
      try {
        const res = await axios.get('/api/auth/check')
        if (res.data.status.error) {
          // 清空状态并跳转登录页
          store.dispatch('clearUserState')
          next('/login')
        } else {
          // 更新用户信息
          store.dispatch('updateUserInfo', res.data.data)
          next()
        }
      } catch (err) {
        // 请求失败默认视为未登录
        store.dispatch('clearUserState')
        next('/login')
      }
    } else {
      next()
    }
  })
  

• 避免全局频繁校验，仅对需要权限的路由执行逻辑，提升性能。

3. 服务器如何触发客户端清除Cookie并登出？ #

• 服务器检测到Cookie无效（如JWT过期、篡改）时，在响应头中通过Set-Cookie将目标Cookie设置为过期状态：

  res.setHeader('Set-Cookie', [
    `authToken=; HttpOnly; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Strict`
  ])
  

• 同时返回错误响应（status.error: true，并在msg中说明原因），前端收到响应后，清空全局登录状态并跳转到登录页。
• 前端可额外监听401状态码，主动执行登出逻辑，形成双重保障。

4. 是否应在登录请求成功响应后自动设置全局状态变量userLogged = ref(true)？ #

• 必须设置。登录成功后，从接口data中提取用户信息，同时将userLogged设为true，这样前端导航栏、路由守卫等组件可基于该状态做展示或拦截。
• 注意：页面刷新时不能仅依赖该变量，必须通过后端校验接口重新确认状态，避免前端状态与后端Cookie不一致（如Cookie已过期，但前端标记仍为true）。
• 示例代码：

  const userLogged = ref(false)
  const userInfo = ref({})
  
  const handleLogin = async (formData) => {
    const res = await axios.post('/api/auth/login', formData)
    if (!res.data.status.error) {
      userLogged.value = true
      userInfo.value = res.data.data
      router.push('/dashboard')
    }
  }
  

内容的提问来源于stack exchange，提问作者V S Vuca