vue中使用router全局守衛(wèi)實現(xiàn)頁面攔截的示例
一、背景
在vue項目中使用vue-router做頁面跳轉(zhuǎn)時,路由的方式有兩種,一種是靜態(tài)路由,另一種是動態(tài)路由。而要實現(xiàn)對路由的控制需要使用vuex和router全局守衛(wèi)進行判斷攔截(安全問題文章最后討論)
二、使用場景
靜態(tài)路由的使用場景:在我們使用靜態(tài)路由實現(xiàn)頁面跳轉(zhuǎn)時,不管我們是否登錄,當我們在地址欄修改地址后,頁面會發(fā)生跳轉(zhuǎn)并展示頁面內(nèi)容(數(shù)據(jù)并不會被展示出來),這樣的問題顯然是不能夠被接受的;
動態(tài)路由的使用場景:動態(tài)路由無非就是從后端拿到了數(shù)據(jù)然后在加到router里面了。假如用戶登錄了,在地址欄修改地址便能直接訪問。所以動態(tài)路由并不能起到攔截作用。
三、解決方案
使用vuex+router.beforeEach()+動態(tài)路由實現(xiàn)頁面攔截
頁面刷新時會清楚vuex里面的值;(防止直接修改地址欄)
router.beforeEach()對跳轉(zhuǎn)前進行攔截判斷;(對vuex里面的值進行判斷)
當用戶登錄時請求后臺拿到數(shù)據(jù),加載路由.(跳轉(zhuǎn)頁面)
四、實現(xiàn)過程
1.首先定義vuex里面的值,需要定義兩個值:
a.登錄狀態(tài)信息的值 loginInfo
b.存儲動態(tài)路由的值 routerList

2.router.beforeEach()對路由跳轉(zhuǎn)前進行控制
//全局守衛(wèi)router.beforeEach((to, from, next)=> { let userId = store.state.loginInfo.id; //這里是對登錄后的值進行判斷,也可對token的值進行判斷 if (userId === ’’) { if (to.meta.requireAuth || to.name == null) { next({path: ’/’}) } else { next(); } } else { //初始化動態(tài)路由方法 initRouter(router, store); next(); } });
3.初始化動態(tài)路由
在全局守衛(wèi)對應條件下加載動態(tài)路由數(shù)據(jù)routerList和在登錄成功時存儲登錄成功的信息loginInfo
新建一個xxx.js文件 引入axios 創(chuàng)建一個函數(shù)并使用export 暴露該方法;
請求成功拿到數(shù)據(jù)后,把數(shù)據(jù)造成和routes里的數(shù)據(jù)一樣。然后使用 router.addRoutes 添加進去;
index中的默認路由

import axios from ’axios’export const initRouter = (router,store)=>{ if (store.state.routerList.length > 0) { return; } axios.get(’ URL’) .then((rest)=>{ let routerList = []; if(rest.data.success){ let routers = rest.data.body; routers.forEach(router=>{ let { path, component, name, } = router let routerObj = { path:path, name:name, component(resolve){ if (component.startsWith('index')) { require([’../components/’ + component + ’.vue’], resolve) } }, meta:{requireAuth:true} //是否是登錄權(quán)限控制 }; routerList.push(routerObj); }); //add到router中 router.addRoutes(routerList); //存儲到vuex中 store.commit(’routerList’, routerList); }else{ console.log(rest.data.error); } }).catch((error)=>{ console.log(error); })}
4.登錄成功后存儲成功狀態(tài)信息并跳轉(zhuǎn)頁面

至此,頁面攔截功能已實現(xiàn)。
五、總結(jié)
該方法實現(xiàn)主要用到了:
1.vuex及頁面刷新時會對vuex進行清空,所以比如退出時要對頁面window.location.reload(),其它地方類似。
2.router.beforeEach()鉤子函數(shù)及關鍵的router.addRoutes方法
3.es6的一些寫法
以上就是vue中使用router全局守衛(wèi)實現(xiàn)頁面攔截的示例的詳細內(nèi)容,更多關于vue 頁面攔截的資料請關注好吧啦網(wǎng)其它相關文章!
相關文章:
1. Python基于requests庫爬取網(wǎng)站信息2. vscode運行php報錯php?not?found解決辦法3. Python使用Selenium自動進行百度搜索的實現(xiàn)4. Java commons-httpclient如果實現(xiàn)get及post請求5. 一文帶你徹底理解Java序列化和反序列化6. 微信小程序?qū)崿F(xiàn)商品分類頁過程結(jié)束7. PHP laravel實現(xiàn)導出PDF功能8. JS中6個對象數(shù)組去重的方法9. 資深程序員:給Python軟件開發(fā)測試的25個忠告!10. python中文本字符處理的簡單方法記錄

網(wǎng)公網(wǎng)安備