vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
Axios攔截器配置
main.js
//定義一個(gè)請(qǐng)求攔截器 Axios.interceptors.request.use(function(config){ store.state.isShow=true; //在請(qǐng)求發(fā)出之前進(jìn)行一些操作 return config }) //定義一個(gè)響應(yīng)攔截器 Axios.interceptors.response.use(function(config){ store.state.isShow=false;//在這里對(duì)返回的數(shù)據(jù)進(jìn)行處理 return config })
分別定義一個(gè)請(qǐng)求攔截器(請(qǐng)求開(kāi)始時(shí)執(zhí)行某些操作)、響應(yīng)攔截器(接受到數(shù)據(jù)后執(zhí)行某些操作),之間分別設(shè)置攔截時(shí)執(zhí)行的操作,改變state內(nèi)isShow的布爾值從而控制loading組件在觸發(fā)請(qǐng)求數(shù)據(jù)開(kāi)始時(shí)顯示loading,返回?cái)?shù)據(jù)時(shí)隱藏loading
特別注意:這里有一個(gè)語(yǔ)法坑(我可是來(lái)來(lái)回回踩了不少次)main.js中調(diào)取、操作vuex state中的數(shù)據(jù)不同于組件中的this.$store.state,而是直接store.state 同上面代碼
一、路由攔截使用
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限 if (store.state.token) { // 通過(guò)vuex state獲取當(dāng)前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù),登錄成功后跳轉(zhuǎn)到該路由 }) } } else { next(); } })
二、攔截器使用
要想統(tǒng)一處理所有http請(qǐng)求和響應(yīng),就得用上 axios 的攔截器。通過(guò)配置http response inteceptor,當(dāng)后端接口返回401 Unauthorized(未授權(quán)),讓用戶重新登錄。
// http request 攔截器 axios.interceptors.request.use( config => { if (store.state.token) { // 判斷是否存在token,如果存在的話,則每個(gè)http header都加上token config.headers.Authorization = `token ${store.state.token}`; } return config; }, err => { return Promise.reject(err); }); // http response 攔截器 axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁(yè)面 store.commit(types.LOGOUT); router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) } } return Promise.reject(error.response.data) // 返回接口返回的錯(cuò)誤信息 });
三、實(shí)例
/** * http配置 */ // 引入axios以及element ui中的loading和message組件 import axios from 'axios' import { Loading, Message } from 'element-ui' // 超時(shí)時(shí)間 axios.defaults.timeout = 5000 // http請(qǐng)求攔截器 var loadinginstace axios.interceptors.request.use(config => { // element ui Loading方法 loadinginstace = Loading.service({ fullscreen: true }) return config }, error => { loadinginstace.close() Message.error({ message: '加載超時(shí)' }) return Promise.reject(error) }) // http響應(yīng)攔截器 axios.interceptors.response.use(data => {// 響應(yīng)成功關(guān)閉loading loadinginstace.close() return data }, error => { loadinginstace.close() Message.error({ message: '加載失敗' }) return Promise.reject(error) }) export default axios
如果你是使用了vux,那么在main.js這樣使用:
Vue.prototype.$http.interceptors.response.use()
參考地址:vue中axios解決跨域問(wèn)題和攔截器使用
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue 實(shí)現(xiàn)axios攔截、頁(yè)面跳轉(zhuǎn)和token 驗(yàn)證
- vue中axios的封裝問(wèn)題(簡(jiǎn)易版攔截,get,post)
- 詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝
- vue axios登錄請(qǐng)求攔截器
- vue axios請(qǐng)求攔截實(shí)例代碼
- vue+vuex+axios實(shí)現(xiàn)登錄、注冊(cè)頁(yè)權(quán)限攔截
- vue中axios解決跨域問(wèn)題和攔截器的使用方法
- Vue2.0 axios前后端登陸攔截器(實(shí)例講解)
- vue+axios實(shí)現(xiàn)登錄攔截的實(shí)例代碼
- Vue+axios 實(shí)現(xiàn)http攔截及路由攔截實(shí)例
相關(guān)文章
集成vue到j(luò)query/bootstrap項(xiàng)目的方法
下面小編就為大家分享一篇集成vue到j(luò)query/bootstrap項(xiàng)目的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02Vue2.0/3.0雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理詳解
這篇文章主要給大家介紹了關(guān)于Vue2.0/3.0雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04Vue中計(jì)算屬性和監(jiān)聽(tīng)屬性及數(shù)據(jù)的響應(yīng)式更新和依賴收集基本原理講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2023-03-03vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案
這篇文章主要介紹了vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案,如果只有一個(gè)匿名v-model的傳遞的話,可以使用vue3.3新添加的編譯宏,defineModel來(lái)使用,每種方案結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10Vue3如何理解ref toRef和toRefs的區(qū)別
本文主要介紹了Vue3如何理解ref toRef和toRefs的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12淺談vue實(shí)現(xiàn)雙向事件綁定v-model的原理
vue使用v-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素,本文就詳細(xì)的介紹一下原理,感興趣的可以了解一下2021-08-08vue+iview/elementUi實(shí)現(xiàn)城市多選
這篇文章主要介紹了vue+iview/elementUi實(shí)現(xiàn)城市多選,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03