当前位置：首页 > VUE

vue怎么实现拦截

2026-01-14 23:48:09VUE

Vue 实现拦截的方法

在 Vue 中可以通过路由守卫、全局拦截器、Axios 拦截器等方式实现拦截功能。

路由守卫拦截

路由守卫是 Vue Router 提供的功能，可以在导航过程中进行拦截。

const router = new VueRouter({ ... })

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

Axios 请求拦截

使用 Axios 的拦截器可以在请求发送前和响应返回后进行拦截处理。

axios.interceptors.request.use(
  config => {
    config.headers.Authorization = 'Bearer ' + getToken()
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

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

全局混入拦截

通过 Vue.mixin 可以实现全局方法拦截。

Vue.mixin({
  created() {
    this.$options.methods && Object.keys(this.$options.methods).forEach(key => {
      const originalMethod = this.$options.methods[key]
      this.$options.methods[key] = function(...args) {
        console.log(`拦截方法 ${key}`)
        return originalMethod.apply(this, args)
      }
    })
  }
})

自定义指令拦截

通过自定义指令可以拦截 DOM 操作。

Vue.directive('intercept', {
  bind(el, binding) {
    el.addEventListener('click', e => {
      if (!binding.value()) {
        e.preventDefault()
        e.stopPropagation()
      }
    })
  }
})

组件生命周期钩子

利用组件生命周期钩子可以实现组件级别的拦截。

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    if (confirm('确定离开吗？')) {
      next()
    } else {
      next(false)
    }
  }
}

这些方法可以根据实际需求选择使用或组合使用，实现不同层次的拦截功能。路由守卫适合页面导航拦截，Axios 拦截器适合 API 请求拦截，全局混入和自定义指令可以实现更细粒度的拦截控制。

vue怎么实现拦截