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開(kāi)發(fā)樹(shù)形結(jié)構(gòu)組件(組件遞歸)
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)樹(shù)形結(jié)構(gòu)組件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例
今天小編就為大家分享一篇Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例
最近在學(xué)習(xí)前段后分離,本文介紹了Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2021-11-11
VUE開(kāi)發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)后臺(tái)管理頁(yè)面步驟
本文從整體上介紹Vue框架的開(kāi)發(fā)流程,結(jié)合具體的案例,使用Vue框架調(diào)用具體的后端接口,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04
vue實(shí)現(xiàn)動(dòng)態(tài)監(jiān)測(cè)元素高度
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)監(jiān)測(cè)元素高度方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問(wèn)題
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因
這篇文章主要介紹了解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
webpack如何打包一個(gè)按需引入的vue組件庫(kù)
在vue項(xiàng)目開(kāi)發(fā)中,我們會(huì)將經(jīng)常用到的邏輯或模塊抽象成組件,對(duì)于那些多個(gè)項(xiàng)目都有用到的組件,可以考慮封裝成組件庫(kù),這篇文章主要給大家介紹了關(guān)于webpack如何打包一個(gè)按需引入的vue組件庫(kù)的相關(guān)資料,需要的朋友可以參考下2022-02-02

