vue ajax 攔截原理與實現方法示例
更新時間：2019年11月29日 12:01:44 作者：自由港
這篇文章主要介紹了vue ajax 攔截原理與實現方法,結合實例形式分析了vue.js基于ajax攔截實現無刷新登錄的相關原理與操作技巧,需要的朋友可以參考下
本文實例講述了vue ajax 攔截原理與實現方法。分享給大家供大家參考，具體如下：
概要說明
在開發(fā)的過程中，我們需要通過AJAX請求，訪問后臺獲取數據，這個獲取數據的時候，當然需要后臺需要時登錄狀態(tài)才能訪問數據，當沒有登錄的情況，這個時候我們需要跳轉到登錄界面進行登錄。
如果每次請求都要做如下處理，我們程序邏輯將無比混亂，ajax 可以為我們解決這個問題。
具體實現思路是：
1.發(fā)送ajax 請求訪問后端數據。
2.后端如果發(fā)現沒有登錄，那么將會丟出一個exceptionaction 的http 響應頭。
3.這個判斷將在ajax 攔截中處理，只要有這個響應頭，我們會檢查是否有登錄token，如果沒有就會去到登錄界面，如果有則嘗試使用token自動登錄。
這個過程將在攔截中完成。
這個好處是 客戶只需要關注業(yè)務代碼的編寫，登錄處理放到攔截中處理，而且所有的請求將都會被攔截。
實現代碼
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)已經登錄。
var token = RxUtil.getCache("token");
if(!token) {
router.push({
name: "login"
});
return;
}
使用攔截器。
axiosInstance.interceptors.response.use(res=>interceptAjax(res));
這樣每次訪問都會經過攔截器，這也給我們一些思路，一些需要統(tǒng)一驗證的的訪問，可以通過攔截器進行處理。
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
這篇文章主要介紹了從零使用webpack手動搭建vue項目的步驟，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
Vue-Cli如何在index.html中進行環(huán)境判斷
這篇文章主要介紹了Vue-Cli如何在index.html中進行環(huán)境判斷問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細介紹了Vue計數器案例的實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
基于Vue sessionStorage實現保留搜索框搜索內容
這篇文章主要介紹了基于Vue sessionStorage實現保留搜索框搜索內容,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了Vue實現進度條變化效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能
本次需求是做一個視頻列表，點擊視頻列表播放對應視頻；同時要求實現斷點分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能，感興趣的朋友一起看看吧2022-12-12
這篇文章主要介紹了Vue axios 跨域請求無法帶上cookie的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹了VUE3之Non-Props屬性的具體使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue攔截器實現統(tǒng)一token,并兼容IE9驗證功能
這篇文章主要介紹了vue攔截器實現統(tǒng)一token,并兼容IE9驗證功能，本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2018-04-04
下面小編就為大家分享一篇vue.js中$set與數組更新方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03