当前位置：首页 > VUE

vue如何实现登录失效

2026-02-21 22:46:42VUE

Vue 实现登录失效的常见方法

使用拦截器处理请求响应 在 axios 拦截器中检查响应状态码，如 401 表示未授权或登录失效。在响应拦截器中捕获该状态码并执行登出操作。

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

结合路由守卫进行验证 在全局前置守卫中检查用户是否认证，未认证则重定向到登录页面。

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

处理 token 过期 在登录时记录 token 的过期时间，定期检查是否过期。

// 登录时存储过期时间
localStorage.setItem('token_expiry', Date.now() + 3600 * 1000)

// 定时检查 token 是否过期
setInterval(() => {
  const expiry = localStorage.getItem('token_expiry')
  if (expiry && Date.now() > parseInt(expiry)) {
    handleLogout()
  }
}, 60000)

实现自动登出功能 长时间无操作时自动登出，通过监听用户活动重置计时器。

let logoutTimer

function resetLogoutTimer() {
  clearTimeout(logoutTimer)
  logoutTimer = setTimeout(() => {
    handleLogout()
  }, 30 * 60 * 1000) // 30分钟无操作自动登出
}

window.addEventListener('mousemove', resetLogoutTimer)
window.addEventListener('keypress', resetLogoutTimer)

处理多标签页同步登出 使用 storage 事件监听其他标签页的登出操作。

vue如何实现登录失效

window.addEventListener('storage', (event) => {
  if (event.key === 'token' && !event.newValue) {
    handleLogout()
  }
})

function handleLogout() {
  localStorage.removeItem('token')
  router.push('/login')
}