vue開發系列 vue ajax攔截

概要說明

在開發的過程中，我們需要通過AJAX請求，訪問后台獲取數據，這個獲取數據的時候，當然需要后台需要時登陸狀態才能訪問數據，當沒有登陸的情況，這個時候我們需要跳轉到登陸界面進行登陸。

如果每次請求都要做如下處理，我們的程序邏輯將無比混亂，ajax可以為我們解決這個問題

具體實現思路是：

1.發送ajax請求訪問后端數據。

2.后段如果發現沒有登陸，那么將會丟出一個exceptionaction的http相應頭。

3.這個判斷將在ajax攔截中處理，只要有這個exceptionaction響應頭，我們會檢查是否有登陸token，如果沒有就會去到登陸界面，如果有則嘗試使用token自動登陸。

這個過程將在攔截中完成。

這個好處是 客戶只需要關注業務代碼的編寫，登陸處理放到攔截中處理，而且所有的請求將都會被攔截

 

實現代碼

//lib/axios
const axiosInstance = axios.create({
    timeout:2000,
    headers:{
        'Content-Type':'application/x-www-form-urlencoded',
        'X-Requested-With':'XMLHttpRequest'
    }
})

axios 是我們訪問后台的js框架

定義攔截處理

//lib/axios
function interceptAjax(res){
    const tmp = res.headers['exceptionaction'];

    if(!tmp) return res;
    //系統已經登陸
    const token = RxUtil.getCache('token');
    if(!token){
        router.push({
            name:'login'
        });
        return;
    }
}

使用攔截器

axiosInstance.interceptors.response.use(res => interceptAjax(res));

這樣每次訪問都會經過攔截器，這也給我們一些思路，一些需要統一驗證的訪問，可以通過攔截器進行處理