在Vue應用程序中，我們可能需要在發送請求之前或響應到達之前添加某些邏輯。這種情況下，我們就需要使用Vue的HTTP攔截器。Vue提供了一種簡單而強大的方式來攔截請求和響應并對其進行修改。

// 創建實例
const http = axios.create();
// 請求攔截器
http.interceptors.request.use(request =>{
// 添加某些邏輯以及修改請求
return request;
}, error =>{
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 響應攔截器
http.interceptors.response.use(response =>{
// 添加某些邏輯以及修改響應
return response;
}, error =>{
// 對響應錯誤做些什么
return Promise.reject(error);
});

在上面的代碼中，我們創建了一個axios實例，并使用它來攔截請求和響應。攔截器分為請求攔截器和響應攔截器。

請求攔截器在請求發送之前修改請求配置。在請求攔截器中，我們可以添加某些邏輯，從而修改請求的headers，url等配置。我們也可以在請求發送之前驗證用戶的身份，以確保請求合法。

http.interceptors.request.use(request =>{
if(localStorage.getItem('access_token')){
request.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
}
return request;
}, error =>{
return Promise.reject(error);
});

在上面的代碼中，我們檢查本地存儲中是否有訪問令牌。如果有，我們將其添加到所有請求的Authorization標頭中。這樣，我們就可以在后端身份驗證成功時發送請求。

響應攔截器在響應到達之前對其進行修改。在響應攔截器中，我們也可以添加某些邏輯，修改響應的數據、錯誤以及統計響應時間等內容。

http.interceptors.response.use(response =>{
if(response.data.status === "error"){
// 錯誤處理邏輯
console.error(response.data.message);
}
return response;
}, error =>{
if(error.response.status === 401){
// 處理未經身份驗證的錯誤
console.error("未經身份驗證的錯誤", error.response.data.message);
}
return Promise.reject(error);
});

在上面的代碼中，我們通過檢查響應數據的狀態來處理錯誤。如果響應數據的狀態為“error”，我們會輸出錯誤消息。在響應錯誤中，我們檢查響應狀態碼，如果為401，表示未經身份驗證，我們就會輸出錯誤信息。

總之，Vue的HTTP攔截器為我們提供了添加自定義邏輯的機會，以對請求和響應進行修改和驗證。通過使用這些攔截器，我們可以使我們的Vue應用程序更加健壯和安全。