当前位置：首页 > VUE

vue实现请求拦截

2026-02-19 03:50:25VUE

Vue 中实现请求拦截的方法

在 Vue 项目中，通常使用 axios 作为 HTTP 客户端。通过 axios 的拦截器（interceptors）功能，可以轻松实现请求和响应的拦截处理。

安装 axios

确保项目中已安装 axios，可以通过以下命令安装：

npm install axios

创建 axios 实例并设置拦截器

在 src 目录下创建一个文件（如 http.js），配置 axios 实例和拦截器：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 根据实际接口地址修改
  timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求前处理逻辑
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据统一处理
    return response.data;
  },
  (error) => {
    // 对错误响应统一处理
    if (error.response.status === 401) {
      alert('登录过期，请重新登录');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default instance;

在 Vue 组件中使用

在组件中引入配置好的 axios 实例，直接发起请求：

import http from '@/http';

export default {
  methods: {
    fetchData() {
      http.get('/user').then((res) => {
        console.log(res);
      });
    },
  },
};

拦截器的常见用途

添加请求头：如自动添加 Authorization 或 Content-Type。
请求参数处理：统一格式化请求数据。
错误处理：全局捕获 401、404 等状态码并跳转页面。
加载状态管理：通过拦截器控制全局加载动画的显示与隐藏。

结合 Vuex 使用

如果需要结合 Vuex 管理全局状态（如 token），可以在拦截器中调用 Vuex 的 store：

vue实现请求拦截

import store from '@/store';

instance.interceptors.request.use((config) => {
  const token = store.state.token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

通过以上方法，可以灵活实现 Vue 项目中的请求拦截功能，提升代码复用性和可维护性。

标签: vue