Vue3 SPA路由保护：仅校验Cookie非空的方案优化咨询

针对你当前仅校验Cookie是否存在的问题，这里有几个更安全的优化方向：

1. 前端直接校验JWT的合法性 #

不用只判断Cookie是否有值，前端可以直接对JWT做基础校验：

• 先检查Token格式是否符合JWT的三段式结构（由两个.分隔的字符串），格式不对直接判定无效；
• 用jwt-decode库解析Token的payload，重点校验exp（过期时间）字段，确保当前时间未超过过期时间；
• 若解析失败、格式错误或已过期，直接跳转登录页。

示例代码：

// access.js中添加校验方法
import jwtDecode from 'jwt-decode'

export const validateToken = (token) => {
  if (!token || !token.includes('.')) return false
  try {
    const payload = jwtDecode(token)
    // 校验过期时间
    return payload.exp * 1000 > Date.now()
  } catch (err) {
    return false
  }
}

// router.beforeEach中调用
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const token = document.cookie.split('; ').find(row => row.startsWith('token='))?.split('=')[1] || ''
  
  if (requiresAuth) {
    if (!validateToken(token)) {
      next('/login')
      return
    }
    next()
  } else {
    next()
  }
})

2. 维护精准的前端认证状态 #

不要依赖Cookie存在与否判断登录状态，在access.js中维护一个响应式的isAuthenticated状态：

• 登录成功后，先校验后端返回的JWT有效，再将isAuthenticated设为true；
• 登出、Token失效或校验不通过时，将isAuthenticated设为false；
• 页面刷新时，从Cookie读取Token并校验，根据结果更新isAuthenticated状态，避免刷新后状态异常。

3. 配合后端的Token验证接口 #

前端校验只能做基础检查，无法验证Token的签名是否合法、是否被后端拉黑等，这时候可以配合后端的验证接口（比如/api/auth/verify）：

• 在路由拦截时，若前端校验通过，但不确定Token是否在后端有效，调用该接口确认；
• 为避免频繁请求，可做防抖处理，或仅在页面首次加载、Token可能失效时调用；
• 如果后端返回Token无效，直接清除Cookie、更新认证状态并跳转登录页。

4. 优化Token的存储安全性 #

既然用Cookie存储Token，务必配置以下属性提升安全性：

• HttpOnly：防止XSS攻击窃取Token（但设置后前端无法读取Token，此时前端校验需依赖后端接口）；
• Secure：仅在HTTPS环境下传输Cookie；
• SameSite=Strict：减少CSRF攻击风险。

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