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