vue的全局變量和全局攔截請求器的示例代碼
做的產(chǎn)品證書管理系統(tǒng)使用的是VueJs和ElementUI，現(xiàn)將遇到的一些知識點記錄一下。
VUe全局變量的實現(xiàn)
全局變量專用模塊Global.vue是以一個特定模塊來組織管理全局變量，需要引用的地方導入該模塊即可。使用方法如下：
將全局變量模塊掛載到Vue.prototype里，在程序入口的main.js里加下面代碼：
import Global from '../components/Global.vue' Vue.prototype.global = Global
掛載后，在需要引用全局變量的模塊時，不需要再導入全局變量模塊，直接用this引用即可。 如：this.global.notifySuccess()
Vue的全局請求攔截器
在全局變量專用模塊Global.vue中設置全局Vue請求攔截器，以在全局攔截器中添加請求超時的方法為例，若請求超時則取消此次請求，并提示用戶。請求超時設置通過攔截器Vue.http.interceptors實現(xiàn)具體代碼如下
Vue.http.interceptors.push((request,next) => {
let timeout
// 如果某個請求設置了_timeout,那么超過該時間，該終端會（abort）請求,并執(zhí)行請求設置的鉤子函數(shù)onTimeout方法，不會執(zhí)行then方法。
if (request._timeout) {
timeout = setTimeout(() =>{
if (request.onTimeout) {
request.onTimeout(request)
request.abort()
}
}, request._timeout)
}
next((response) => {
clearTimeout(timeout)
return response
})
})
當頁面中用到vue-resource請求的地方設置如下即可：
this.$http.get('url',{
params:{.......},
......
_timeout:3000,
onTimeout: (request) => {
alert("請求超時");
}
}).then((response)=>{
});
Vue的全局守衛(wèi)
全局路由守衛(wèi)是指在路由跳轉時對登錄狀態(tài)進行檢查?？梢允褂胷outer.beforeEach注冊一個全局前置守衛(wèi)：
const router = new VueRouter({…})
Router.beforeEach((to,from,next)=> { …})
當一個導航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時導航在所有守衛(wèi)resolve完之前一直處于等待中。每個守衛(wèi)方法接收三個參數(shù)：
- to:Route即將要進入的目標，即路由對象;
- from:Route當前導航正要離開的路由;
- next:Function：一定要調(diào)用該方法來resolve這個鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)。
使用實例如下：
// 全局路由守衛(wèi)，路由時檢查用戶是否登錄，若無登錄信息，指向登錄界面
router.beforeEach((to, from, next) => {
const nextRoute = ['AdminIndex','系統(tǒng)設置', '產(chǎn)品管理', '客戶管理', '證書管理', '日志管理']
if (nextRoute.indexOf(to.name)>= 0) {
if (sessionStorage.getItem('username')){
next()
} else {
window.location.replace('/login.html')
}
} else {
next()
}
})
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue history 模式打包部署在域名的二級目錄的配置指南
這篇文章主要介紹了vue history 模式打包部署在域名的二級目錄的配置指南 ，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue項目中axios如何捕捉http狀態(tài)碼為401錯誤問題
這篇文章主要介紹了vue項目中axios如何捕捉http狀態(tài)碼為401錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
VueNative是一個使用JavaScript構建跨平臺原生移動應用程序的框架m這篇文章主要給大家介紹了關于如何利用Vue Native構建移動應用的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-08-08
vue2.0 如何把子組件的數(shù)據(jù)傳給父組件(推薦)
這篇文章主要介紹了vue2.0 如何把子組件的數(shù)據(jù)傳給父組件,需要的朋友可以參考下2018-01-01
公司的大數(shù)據(jù)工作組就需要通過數(shù)據(jù)大屏展示一些處理過后有價值的信息，本文主要介紹了Vue大屏數(shù)據(jù)展示示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
Vue報錯:TypeError:Cannot create property '
這篇文章主要介紹了Vue報錯:TypeError:Cannot create property 'xxx' on string 'xxxx'問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue-element-admin開發(fā)教程(v4.0.0之后)
由于vue-element-admin的架構再4.0.0版本后做了重構，整體結構上和之前的還是很相似的，但是也有些變化，本文就介紹vue-element-admin開發(fā)教程(v4.0.0之后)，感興趣的可以了解一下2022-04-04
vue實現(xiàn)tab切換的3種方式及切換保持數(shù)據(jù)狀態(tài)
這篇文章主要給大家介紹了關于vue實現(xiàn)tab切換的3種方式及切換保持數(shù)據(jù)狀態(tài)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要介紹了vue路由跳轉了但界面不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04