当前位置：首页 > VUE

vue实现过期接口拦截

2026-01-22 00:52:58VUE

vue实现过期接口拦截的方法

在Vue项目中实现过期接口拦截通常需要结合axios拦截器和后端返回的状态码或自定义字段。以下是几种常见实现方式：

基于HTTP状态码的拦截

当后端返回特定状态码（如401）时触发拦截逻辑：

// axios响应拦截器
axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    // 清除本地token
    localStorage.removeItem('token')
    // 跳转登录页
    router.push('/login')
    // 可添加提示
    Message.error('登录已过期，请重新登录')
  }
  return Promise.reject(error)
})

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

当后端在响应体中返回特定字段时触发拦截：

axios.interceptors.response.use(response => {
  if (response.data.code === 1001) {
    // 处理token过期逻辑
    refreshToken().then(() => {
      return axios(response.config)
    })
  }
  return response
})

自动刷新token方案

实现token过期后自动刷新并重发请求：

let isRefreshing = false
let requests = []

axios.interceptors.response.use(response => {
  return response
}, error => {
  const { config, response } = error
  if (response.status === 401 && !config._retry) {
    if (!isRefreshing) {
      isRefreshing = true
      return refreshToken().then(res => {
        const { token } = res.data
        setToken(token)
        config.headers.Authorization = `Bearer ${token}`
        requests.forEach(cb => cb(token))
        requests = []
        return axios(config)
      }).finally(() => {
        isRefreshing = false
      })
    } else {
      return new Promise(resolve => {
        requests.push(token => {
          config.headers.Authorization = `Bearer ${token}`
          resolve(axios(config))
        })
      })
    }
  }
  return Promise.reject(error)
})

结合Vuex的全局状态管理

在store中管理登录状态和拦截逻辑：

// store/modules/user.js
actions: {
  checkToken({ commit }, error) {
    if (error.response.status === 401) {
      commit('CLEAR_USER_INFO')
      router.push('/login')
    }
  }
}

// axios拦截器中调用
error => {
  store.dispatch('user/checkToken', error)
  return Promise.reject(error)
}

前端主动检查token有效期

在请求发出前检查token是否即将过期：

vue实现过期接口拦截

axios.interceptors.request.use(config => {
  const token = getToken()
  if (token && isTokenExpired(token)) {
    // 主动刷新token或提示用户
    return refreshToken().then(() => {
      config.headers.Authorization = `Bearer ${getToken()}`
      return config
    })
  }
  return config
})