本文實(shí)例講述了vue ajax 攔截原理與實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

10年積累的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有貴港免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

概要說明

在開發(fā)的過程中，我們需要通過AJAX請求，訪問后臺(tái)獲取數(shù)據(jù)，這個(gè)獲取數(shù)據(jù)的時(shí)候，當(dāng)然需要后臺(tái)需要時(shí)登錄狀態(tài)才能訪問數(shù)據(jù)，當(dāng)沒有登錄的情況，這個(gè)時(shí)候我們需要跳轉(zhuǎn)到登錄界面進(jìn)行登錄。

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

具體實(shí)現(xiàn)思路是：

1.發(fā)送ajax 請求訪問后端數(shù)據(jù)。

2.后端如果發(fā)現(xiàn)沒有登錄，那么將會(huì)丟出一個(gè)exceptionaction 的http 響應(yīng)頭。

3.這個(gè)判斷將在ajax 攔截中處理，只要有這個(gè)響應(yīng)頭，我們會(huì)檢查是否有登錄token，如果沒有就會(huì)去到登錄界面，如果有則嘗試使用token自動(dòng)登錄。

這個(gè)過程將在攔截中完成。

這個(gè)好處是 客戶只需要關(guān)注業(yè)務(wù)代碼的編寫，登錄處理放到攔截中處理，而且所有的請求將都會(huì)被攔截。

實(shí)現(xiàn)代碼

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

axios 是我們訪問后臺(tái)的JS框架。

定義攔截處理。

function interceptAjax(res){
  var tmp = res.headers["exceptionaction"];
  if(!tmp) return res;
  //系統(tǒng)已經(jīng)登錄。
  var token = RxUtil.getCache("token");
  if(!token) {
    router.push({
      name: "login"
    });
    return;
  }

使用攔截器。

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

這樣每次訪問都會(huì)經(jīng)過攔截器，這也給我們一些思路，一些需要統(tǒng)一驗(yàn)證的的訪問，可以通過攔截器進(jìn)行處理。

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。