当前位置：首页 > VUE

vue实现过期接口拦截

2026-02-22 15:57:39VUE

Vue 实现过期接口拦截方案

在 Vue 项目中拦截过期接口通常需要结合 Axios 拦截器和后端返回的状态码进行处理。以下是几种常见实现方式：

基于 HTTP 状态码的拦截

后端通常会在接口过期时返回特定状态码（如 401 或 403）。可以在 Axios 响应拦截器中统一处理：

// axios 拦截器配置
axios.interceptors.response.use(
  response => response,
  error => {
    const { status } = error.response
    if (status === 401 || status === 403) {
      // 跳转登录页或刷新 token
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

基于自定义响应字段的拦截

部分 API 设计会在响应体中包含过期标识字段：

axios.interceptors.response.use(response => {
  if (response.data.code === 'TOKEN_EXPIRED') {
    // 执行 token 刷新逻辑
    return refreshToken().then(() => axios(response.config))
  }
  return response
})

Token 自动刷新机制

实现无感知的 token 刷新流程：

let isRefreshing = false
const failedQueue = []

axios.interceptors.response.use(null, error => {
  if (error.response.status === 401 && !isRefreshing) {
    isRefreshing = true
    return refreshToken().then(newToken => {
      // 重试所有失败的请求
      failedQueue.forEach(prom => prom.resolve(axios(prom.config)))
      failedQueue.length = 0
      return axios(error.config)
    }).finally(() => {
      isRefreshing = false
    })
  }

  // 将请求加入队列等待刷新后重试
  if (isRefreshing) {
    return new Promise((resolve) => {
      failedQueue.push({ resolve, config: error.config })
    })
  }

  return Promise.reject(error)
})

结合 Vuex 的状态管理

在大型项目中建议结合状态管理处理过期状态：

// store/modules/auth.js
actions: {
  checkApiExpiry({ commit }, error) {
    if (error.response.data.code === 'API_DEPRECATED') {
      commit('SET_API_EXPIRED', true)
    }
  }
}

// 组件中
this.$store.dispatch('checkApiExpiry', error)

版本控制拦截

对于接口版本过期的场景：

axios.interceptors.response.use(response => {
  if (response.headers['api-version'] !== currentVersion) {
    showVersionWarningModal()
  }
  return response
})