vue 当前页面拦截http请求

在 Vue.js 中，想要拦截当前页面的所有 HTTP 请求，你可以使用第三方插件如 `axios` 或者 `vue-resource`，它们都支持拦截网络请求的功能。以下是使用 `axios` 的示例：

首先，你需要安装 `axios`：

npm install axios

然后，在你的 Vue 组件或者全局配置文件中设置拦截器：

import axios from 'axios';

// 创建一个实例并添加拦截器
const instance = axios.create({
  baseURL: '你的API基础URL', // 如果需要的话
  headers: {
    'Content-Type': 'application/json'
  },
});

instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    console.log('请求被发送');
    return config;
  },
  error => {
    // 对请求错误做些什么
    console.error('请求出错', error);
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  response => {
    // 对响应数据做处理
    console.log('响应成功', response.data);
    return response.data;
  },
  error => {
    // 对响应错误做处理
    console.error('响应失败', error.response.data);
    return Promise.reject(error.response.data);
  }
);

// 现在你可以在组件里像这样发送请求
export default {
  methods: {
    fetchData() {
      instance.get('/api/data')
        .then(response => {
          // 处理数据...
        })
        .catch(error => {
          // 错误处理...
        });
    }
  }
};

如果你选择使用 Vue Router 的导航守卫（gaurd），也可以在 `beforeEach` 钩子中拦截导航到的路由对应的 HTTP 请求：

router.beforeEach((to, from, next) => {
  if (to.meta.httpInterceptor) {
    const request = axios(to.meta.url); // 假设你有封装好的 API 函数
    request.then(response => {
      // 处理数据...
      next();
    }).catch(error => {
      // 错误处理...
      next(false);
    });
  } else {
    next();
  }
});