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

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

在上面的代碼中，我們創(chuàng)建了一個(gè)axios實(shí)例，并使用它來攔截請求和響應(yīng)。攔截器分為請求攔截器和響應(yīng)攔截器。

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

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標(biāo)頭中。這樣，我們就可以在后端身份驗(yàn)證成功時(shí)發(fā)送請求。

響應(yīng)攔截器在響應(yīng)到達(dá)之前對其進(jìn)行修改。在響應(yīng)攔截器中，我們也可以添加某些邏輯，修改響應(yīng)的數(shù)據(jù)、錯(cuò)誤以及統(tǒng)計(jì)響應(yīng)時(shí)間等內(nèi)容。

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

在上面的代碼中，我們通過檢查響應(yīng)數(shù)據(jù)的狀態(tài)來處理錯(cuò)誤。如果響應(yīng)數(shù)據(jù)的狀態(tài)為“error”，我們會輸出錯(cuò)誤消息。在響應(yīng)錯(cuò)誤中，我們檢查響應(yīng)狀態(tài)碼，如果為401，表示未經(jīng)身份驗(yàn)證，我們就會輸出錯(cuò)誤信息。

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