Vue HTTP 攔截可以在發送 HTTP 請求前或接收到 HTTP 響應后對請求和響應進行過濾、處理或修改。這對于在前端應用中處理 HTTP 請求和響應非常有用，特別是當需要對所有請求或響應進行相同的預處理時。

Vue 通過攔截器（Interceptor）機制來實現 HTTP 攔截。一個攔截器可以攔截請求或響應，并在它們到達前端應用之前或到達后端之前執行某些操作。

以下是一個使用 axios 庫實現 HTTP 攔截的例子：

import axios from 'axios';
import store from '@/store';
// 創建 axios 實例
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000,
});
// 請求攔截器
instance.interceptors.request.use(
(config) =>{
// 在發送請求之前對請求進行處理
config.headers.Authorization = 'Bearer ' + store.getters.token;
return config;
},
(error) =>{
// 對請求錯誤進行處理
console.error('Request error:', error);
return Promise.reject(error);
}
);
// 響應攔截器
instance.interceptors.response.use(
(response) =>{
// 對響應數據進行處理
return response;
},
(error) =>{
// 對響應錯誤進行處理
console.error('Response error:', error);
return Promise.reject(error);
}
);
// 導出 axios 實例
export default instance;

在上面的例子中，我們創建了一個 axios 實例，并添加了兩個攔截器。請求攔截器用來在請求發送之前處理請求，而響應攔截器用來在響應返回之后處理響應。

在請求攔截器中，我們添加了一個 Authorization 請求頭用來攜帶用戶的身份認證信息，同時還可以對請求進行其他處理。在響應攔截器中，我們對響應數據進行處理，例如將響應數據轉換為 JavaScript 對象。如果發生錯誤，我們可以在攔截器中進行錯誤處理，例如打印錯誤信息或跳轉到錯誤頁面。