如何在Vue-axios中添加全局请求拦截器？

在 Vue.js 中，使用 axios 作为 HTTP 客户端库时，如果需要在所有请求之前或之后添加一些通用操作，比如发送认证信息、处理错误等，可以设置全局的请求拦截器。下面是在 Vue 项目中配置全局请求拦截器的步骤：

1. 首先，在你的 `src` 目录下创建一个名为 `api/index.js` 或类似文件，导入 Axios 和 Vue 实例。

import axios from 'axios';
import { createApp } from 'vue';

const app = createApp(App); // 假设你已经有了 App 组件

// 创建 Axios 实例并配置全局拦截器
axios.defaults.headers.common['Content-Type'] = 'application/json'; // 设置默认请求头

app.config.globalProperties.$http = axios; // 将 Axios 对象挂载到 Vue 实例上，供组件访问

// 全局请求前拦截器
axios.interceptors.request.use((config) => {
  // 在这里添加请求前的操作，如添加 token 或者校验登录状态
  console.log('Request Interceptor:', config);
  return config;
}, (error) => {
  // 请求失败时的处理
  console.error('Error in Request Interceptor:', error);
  return Promise.reject(error);
});

// 全局响应后拦截器
axios.interceptors.response.use(
  (response) => {
    // 成功响应的处理
    console.log('Response Interceptor:', response.data);
    return response.data;
  },
  (error) => {
    // 错误响应的处理
    console.error('Error in Response Interceptor:', error.response);
    if (error.response.status === 401) {
      // 如果是未授权，可以在这里触发重定向或提示用户重新登录
      // handleUnauthorized(error);
    }
    return Promise.reject(error);
  }
);

export default axios;

然后在你的 Vue 组件中就可以通过 `$http` 来发起请求了，例如：

export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    fetchData() {
      this.$http.get('/api/data')
        .then(response => {
          // 使用响应数据
          console.log(response);
        })
        .catch(error => {
          this.message = 'An error occurred!';
        });
    },
  },
};