当前位置：首页 > VUE

vue怎么实现拦截

2026-02-11 02:49:45VUE

Vue 实现拦截的方法

在 Vue 中可以通过多种方式实现拦截功能，常见的场景包括路由拦截、请求拦截和组件生命周期拦截。以下是具体实现方法：

路由拦截

使用 Vue Router 的全局前置守卫 beforeEach 可以实现路由跳转前的拦截：

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

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

请求拦截

通过 axios 的拦截器可以实现 HTTP 请求和响应的拦截：

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

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

组件生命周期拦截

使用 Vue 的 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 守卫可以在组件级别拦截路由：

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被确认前调用
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    const answer = confirm('确定要离开吗？')
    if (answer) {
      next()
    } else {
      next(false)
    }
  }
}

自定义指令拦截

通过 Vue 的自定义指令可以实现 DOM 操作拦截：

Vue.directive('permission', {
  inserted(el, binding) {
    if (!checkPermission(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

全局混入拦截

使用 Vue.mixin 可以实现全局的生命周期方法拦截：

vue怎么实现拦截

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

这些方法可以根据具体需求组合使用，实现不同层面的拦截功能。

标签: vue