当前位置：首页 > VUE

vue如何实现token失效

2026-01-20 18:20:58VUE

Vue 中实现 Token 失效处理的方案

在 Vue 应用中，Token 失效通常需要结合前端和后端的逻辑来实现。以下是几种常见的处理方式：

拦截请求响应

使用 Axios 的响应拦截器检测 Token 失效状态码（如 401），并统一处理跳转登录页或刷新 Token：

vue如何实现token失效

// axios 拦截器配置
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 清除本地存储的 token
      localStorage.removeItem('token')
      // 跳转到登录页
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

定时检查 Token 过期

通过定时器检查 Token 的剩余有效期，提前刷新或提示用户：

// 检查 token 过期时间
function checkTokenExpiry() {
  const token = localStorage.getItem('token')
  if (token) {
    const decoded = jwtDecode(token) // 需要 jwt-decode 库
    const now = Date.now() / 1000
    if (decoded.exp < now) {
      // token 已过期处理
    }
  }
}
// 每 5 分钟检查一次
setInterval(checkTokenExpiry, 300000)

被动处理失效请求

当后端返回特定状态码时，执行 Token 失效逻辑：

vue如何实现token失效

async function fetchData() {
  try {
    const res = await axios.get('/api/data')
    return res.data
  } catch (error) {
    if (error.response.status === 401) {
      // 显示登录模态框或跳转
    }
  }
}

双 Token 机制

使用 access token 和 refresh token 组合方案：

// token 刷新函数
async function refreshToken() {
  try {
    const res = await axios.post('/refresh', {
      refreshToken: localStorage.getItem('refreshToken')
    })
    localStorage.setItem('token', res.data.accessToken)
    return res.data.accessToken
  } catch (error) {
    // 刷新失败跳转登录
    router.push('/login')
  }
}

路由守卫检查

通过 Vue Router 的全局前置守卫验证 Token：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    next('/login')
  } else {
    next()
  }
})

实现 Token 失效处理时，应根据具体业务需求选择合适的方式，通常需要组合多种方案来提供更好的用户体验。