当前位置：首页 > VUE

vue实现拦截器

2026-01-20 16:11:26VUE

Vue 拦截器实现方法

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

使用 Axios 拦截器

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

安装 Axios：

npm install axios

创建拦截器示例：

import axios from 'axios';

// 请求拦截器
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;
  },
  error => {
    // 统一处理错误响应
    if (error.response.status === 401) {
      // 跳转到登录页
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

Vue Router 导航守卫

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

import router from './router';

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

Vue 自定义指令拦截

通过自定义指令实现对 DOM 操作的拦截。

Vue.directive('permission', {
  inserted: function (el, binding) {
    const hasPermission = checkPermission(binding.value);
    if (!hasPermission) {
      el.parentNode.removeChild(el);
    }
  }
});

组合式 API 拦截

在 Vue 3 中，可以使用组合式 API 实现更灵活的拦截逻辑。

import { onBeforeMount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      const isAuth = localStorage.getItem('token');
      if (!isAuth) {
        router.push('/login');
      }
    });
  }
};