当前位置：首页 > VUE

vue拦截器实现

2026-01-20 00:23:03VUE

Vue 拦截器实现方法

在 Vue 中，拦截器通常用于在请求或响应被处理前进行统一处理，例如添加认证信息、错误处理等。以下是几种常见的拦截器实现方式：

使用 Axios 拦截器

Axios 是 Vue 中常用的 HTTP 客户端，支持请求和响应拦截器。

请求拦截器示例：

axios.interceptors.request.use(
  config => {
    // 在发送请求前添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${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 Router 导航守卫

Vue Router 提供了全局前置守卫（beforeEach）和全局后置钩子（afterEach），可用于拦截路由跳转。

全局前置守卫示例：

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

全局后置钩子示例：

router.afterEach((to, from) => {
  // 路由跳转后执行的操作，如页面标题设置
  document.title = to.meta.title || '默认标题';
});

使用 Vue 自定义指令拦截事件

Vue 自定义指令可以用于拦截 DOM 事件，例如阻止未授权操作。

自定义指令示例：

Vue.directive('auth', {
  inserted(el, binding) {
    const hasPermission = checkPermission(binding.value);
    if (!hasPermission) {
      el.style.display = 'none';
    }
  }
});

// 使用方式
<button v-auth="'admin'">管理员操作</button>

使用 Vue 混入（Mixin）拦截生命周期

混入可以用于在多个组件中复用拦截逻辑，例如在 created 钩子中检查权限。

混入示例：

const authMixin = {
  created() {
    if (!this.$store.state.user.isAuthenticated) {
      this.$router.push('/login');
    }
  }
};

// 在组件中使用
export default {
  mixins: [authMixin],
  // 其他组件逻辑
};