当前位置：首页 > VUE

vue如何实现拦截

2026-01-19 12:14:21VUE

Vue 实现拦截的方法

在 Vue 中，可以通过多种方式实现拦截功能，包括路由拦截、HTTP 请求拦截和全局拦截。以下是具体实现方法。

路由拦截

使用 Vue Router 的导航守卫（Navigation Guards）可以实现路由拦截，常用于权限控制或登录验证。

// 在 router/index.js 中配置
router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 检查用户是否登录
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 跳转到登录页
  } else {
    next(); // 放行
  }
});

HTTP 请求拦截

通过 Axios 的拦截器（Interceptors）可以拦截 HTTP 请求和响应，常用于添加请求头或统一处理错误。

// 请求拦截
axios.interceptors.request.use(
  config => {
    config.headers.Authorization = `Bearer ${token}`; // 添加 token
    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 的全局混入（Global Mixin）或自定义指令（Directives）可以实现全局拦截逻辑。

// 全局混入
Vue.mixin({
  created() {
    if (!this.$store.state.isLoggedIn) {
      this.$router.push('/login'); // 检查登录状态
    }
  }
});

// 自定义指令
Vue.directive('auth', {
  inserted(el, binding) {
    if (!checkAuth(binding.value)) {
      el.style.display = 'none'; // 隐藏未授权元素
    }
  }
});

组件内拦截

在组件内部使用生命周期钩子或方法拦截特定操作。

export default {
  beforeRouteEnter(to, from, next) {
    if (localStorage.getItem('token')) {
      next(); // 允许进入组件
    } else {
      next('/login'); // 重定向
    }
  },
  methods: {
    submitForm() {
      if (!this.formValid) {
        return false; // 拦截表单提交
      }
      // 正常提交逻辑
    }
  }
};

通过以上方法，可以根据需求灵活实现 Vue 中的拦截功能。

vue如何实现拦截