当前位置：首页 > VUE

vue如何实现token失效

2026-02-21 10:07:15VUE

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

在 Vue 项目中，处理 Token 失效通常需要结合前端和后端的协作。以下是几种常见的实现方式：

拦截请求并检查 Token 状态

使用 Axios 拦截器可以在每次请求时检查 Token 是否有效。如果后端返回 401 状态码，表示 Token 已失效，可以跳转到登录页面。

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

定时检查 Token 有效期

对于 JWT 等有明确过期时间的 Token，可以在前端设置定时器检查 Token 是否即将过期。

const checkTokenExpiration = () => {
  const token = localStorage.getItem('token')
  if (token) {
    const decoded = jwt_decode(token)
    const currentTime = Date.now() / 1000
    if (decoded.exp - currentTime < 300) { // 5分钟内过期
      refreshToken()
    }
  }
}

// 每分钟检查一次
setInterval(checkTokenExpiration, 60000)

实现 Token 自动刷新

当检测到 Token 即将过期时，可以调用刷新 Token 的接口获取新的 Token。

const refreshToken = async () => {
  try {
    const response = await axios.post('/refresh-token', {
      refreshToken: localStorage.getItem('refreshToken')
    })
    localStorage.setItem('token', response.data.token)
  } catch (error) {
    // 刷新失败，跳转登录
    router.push('/login')
  }
}

结合路由守卫处理

可以在全局路由守卫中检查 Token 状态，防止用户访问需要认证的页面时 Token 已失效。

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

服务器主动通知 Token 失效

对于 WebSocket 或 Server-Sent Events 等长连接场景，服务器可以主动通知客户端 Token 已失效。

const eventSource = new EventSource('/token-status')
eventSource.onmessage = (event) => {
  if (event.data === 'token_invalid') {
    localStorage.removeItem('token')
    router.push('/login')
  }
}

以上方法可以单独使用，也可以组合使用，根据项目具体需求选择最适合的方案。关键在于确保用户 Token 失效时能够及时处理，既保证安全性又不影响用户体验。

vue如何实现token失效