vue ajax 攔截原理與實(shí)現(xiàn)方法示例

發(fā)布時(shí)間：2020-10-23 21:25:26 來源：腳本之家閱讀：145 作者：自由港欄目：web開發(fā)

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

概要說明

在開發(fā)的過程中，我們需要通過AJAX請(qǐng)求，訪問后臺(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)行登錄。

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

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

1.發(fā)送ajax 請(qǐng)求訪問后端數(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ù)代碼的編寫，登錄處理放到攔截中處理，而且所有的請(qǐng)求將都會(huì)被攔截。

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

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

axios 是我們?cè)L問后臺(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)行處理。

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

向AI問一下細(xì)節(jié)

vue ajax 攔截原理與實(shí)現(xiàn)方法示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽