vue ajax 攔截原理與實現(xiàn)方法示例
更新時間：2019年11月29日 12:01:44 作者：自由港
這篇文章主要介紹了vue ajax 攔截原理與實現(xiàn)方法,結(jié)合實例形式分析了vue.js基于ajax攔截實現(xiàn)無刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下
本文實例講述了vue ajax 攔截原理與實現(xiàn)方法。分享給大家供大家參考，具體如下：
概要說明
在開發(fā)的過程中，我們需要通過AJAX請求，訪問后臺獲取數(shù)據(jù)，這個獲取數(shù)據(jù)的時候，當然需要后臺需要時登錄狀態(tài)才能訪問數(shù)據(jù)，當沒有登錄的情況，這個時候我們需要跳轉(zhuǎn)到登錄界面進行登錄。
如果每次請求都要做如下處理，我們程序邏輯將無比混亂，ajax 可以為我們解決這個問題。
具體實現(xiàn)思路是：
1.發(fā)送ajax 請求訪問后端數(shù)據(jù)。
2.后端如果發(fā)現(xiàn)沒有登錄，那么將會丟出一個exceptionaction 的http 響應(yīng)頭。
3.這個判斷將在ajax 攔截中處理，只要有這個響應(yīng)頭，我們會檢查是否有登錄token，如果沒有就會去到登錄界面，如果有則嘗試使用token自動登錄。
這個過程將在攔截中完成。
這個好處是 客戶只需要關(guān)注業(yè)務(wù)代碼的編寫，登錄處理放到攔截中處理，而且所有的請求將都會被攔截。
實現(xiàn)代碼
const axiosInstance = axios.create({
timeout: 20000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
});
axios 是我們訪問后臺的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));
這樣每次訪問都會經(jīng)過攔截器，這也給我們一些思路，一些需要統(tǒng)一驗證的的訪問，可以通過攔截器進行處理。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
vuex是一個專為vue.js應(yīng)用程序開發(fā)的 狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue入門之vuex安裝與使用的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面的幾種常用方法,vue跳轉(zhuǎn)頁面有好幾種不同方法,文中通過代碼將實現(xiàn)的方法介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
KeepAlive?是一個內(nèi)置組件，那封裝一個組件對于大家來說應(yīng)該不會有太大的困難，它的核心邏輯在于它的?render?函數(shù)，它用?map?去記錄要緩存的組件，就是?[key，vnode]?的形式，這篇文章主要介紹了Vue3?KeepAlive實現(xiàn)原理,需要的朋友可以參考下2022-09-09
這篇文章介紹了vue使用Vuex狀態(tài)管理模式的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
本篇文章主要介紹了詳解webpack+vue-cli項目打包技巧 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue引入element-ui之后，頁面是空白的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
過去在Vue2中,我們采用ref來獲取標簽的信息,用以替代傳統(tǒng) js 中的 DOM 行為,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點的相關(guān)資料,需要的朋友可以參考下2022-11-11
關(guān)于el-form中el-input輸入框的寬度問題詳解
自從用了element-ui,確實好用,該有的組件都有,下面這篇文章主要給大家介紹了關(guān)于el-form中el-input輸入框的寬度問題的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue3+TypeScript+vue-router的使用方法
本文詳細講解了vue3+TypeScript+vue-router的使用方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01