vue如何实现登录失效

Vue 实现登录失效处理

使用 axios 拦截器检测登录失效

在 axios 的响应拦截器中检查返回状态码，当检测到 401 未授权状态时跳转到登录页。

// axios 拦截器配置
import axios from 'axios'
import router from './router'

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

结合路由守卫进行全局验证

在路由全局前置守卫中检查用户登录状态，当 token 失效时重定向到登录页面。

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

定时检查 token 有效性

设置定时器定期检查 token 是否即将过期，提前刷新或提示用户重新登录。

// token 检查函数
function checkTokenExpiration() {
  const token = localStorage.getItem('token')
  const expiresAt = localStorage.getItem('expires_at')

  if (!token || new Date().getTime() > expiresAt) {
    localStorage.removeItem('token')
    localStorage.removeItem('expires_at')
    router.push('/login')
  }
}

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

后端配合返回明确状态

确保后端 API 在 token 失效时返回明确的 401 状态码，前端根据该状态码进行统一处理。

用户友好的提示信息

当检测到登录失效时，显示友好的提示信息而非直接跳转。

// 使用 Element UI 提示
import { Message } from 'element-ui'

if (error.response.status === 401) {
  Message.error('登录已过期，请重新登录')
  router.push('/login')
}

自动刷新 token 机制

在 token 即将过期时自动刷新，避免频繁要求用户重新登录。

// token 刷新逻辑
function refreshToken() {
  return axios.post('/auth/refresh', {
    refresh_token: localStorage.getItem('refresh_token')
  }).then(response => {
    localStorage.setItem('token', response.data.token)
    localStorage.setItem('expires_at', response.data.expires_at)
  })
}

登出时清理数据

用户主动登出或检测到登录失效时，清理本地存储的认证信息。

function logout() {
  localStorage.removeItem('token')
  localStorage.removeItem('refresh_token')
  localStorage.removeItem('expires_at')
  router.push('/login')
}