vue利用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁(yè)面的實(shí)例代碼
有這樣一個(gè)場(chǎng)景:如果你在登錄之前輸入了http://localhost:8080/oauth2-mgm-app/#/userManage,想進(jìn)入userManage頁(yè)面,但是由于沒有登錄,系統(tǒng)是不會(huì)讓你進(jìn)入這個(gè)頁(yè)面,之后會(huì)被定向到login頁(yè)面。但是在登錄之后,認(rèn)為你有這個(gè)權(quán)限了,就需要重新定向到userManage頁(yè)面。大致流程圖如圖1所示:
圖1 登錄后跳轉(zhuǎn)到未登錄前指定頁(yè)面流程圖
在vue-route的官方文檔里其實(shí)有給到過(guò)這個(gè)demo,官方文檔鏈接在此:https://router.vuejs.org/zh/guide/advanced/meta.html。但是不是很符合我們的需求,于是稍加改動(dòng),先上代碼,搭配流程圖可能更容易理解:
router.beforeEach((to, from, next) => { var asideMenuConfig = sessionStorage.getItem("asideMenuConfig"); // 驗(yàn)證當(dāng)前路由所有的匹配中是否需要有登錄驗(yàn)證的 if (to.matched.some(record => record.meta.requiresAuth)) { // 這里可以將cookie里是否存有token作為驗(yàn)證是否登錄的條件 // 請(qǐng)根據(jù)自身業(yè)務(wù)需要修改 // 本段代碼根據(jù)是否有權(quán)限菜單作為是否登錄依據(jù) if (asideMenuConfig) { //校驗(yàn)所跳路由是否在配置菜單中 if (asideMenuConfig.indexOf(to.path) != -1 || to.path == "/index" || to.path == "/login") { if(sessionStorage.getItem('redirect')!=null){ var redirect=sessionStorage.getItem('redirect'); if(to.path == redirect){//解決next()無(wú)限循環(huán) next() }else{ next({ path: redirect }); } }else{ next(); } } else { next({ path: from.path }) } } else { sessionStorage.setItem('redirect', to.fullPath); next({ name: 'login' }) } } else { next(); } })
系統(tǒng)以是否有權(quán)限菜單作為是否登錄依據(jù),此處的權(quán)限菜單(不同人有不同的權(quán)限,所顯示的菜單也不一樣)由后端送出,處理成自己想要的樹結(jié)構(gòu)(例如樣例代碼中的asideMenuConfig,如圖2所示)之后保存下來(lái),此為前提。還有一種就是利用token驗(yàn)證作為登錄依據(jù),根據(jù)自己的業(yè)務(wù)需要吧,此處不展開。
圖2asideMenuConfig
首先要在route.js定義路由(代碼為節(jié)選):在路由元信息(meta字段)中添加一個(gè)對(duì)象,里面包含:requiresAuth(是否需要權(quán)限),title(子菜單名),parent(所屬菜單名)
{ path: '/RoleManage', name: 'RoleManage', component: () => import("@/pages/UserManage/roleManage"), meta: { requiresAuth: true, title: '角色管理', parent:"用戶管理" } },
然后我們需要遍歷$rout.matched來(lái)檢查路由記錄中的meta字段,這些在官方文檔中已經(jīng)寫的很清楚了,這里就不細(xì)細(xì)張開了。這里重點(diǎn)看下some() 方法,some()測(cè)試數(shù)組中的某些元素是否通過(guò)了指定函數(shù)的測(cè)試。
to.matched.some(record =>record.meta.requiresAuth)表示的是只要有一個(gè)頁(yè)面的meta里的requiresAuth為true,即需要權(quán)限,則to.matched.some()返回true?! ?/p>
最后還有一處代碼需要注意的是:
有人是不是就想了,獲取了登陸前保存的頁(yè)面路徑就可以直接跳轉(zhuǎn)到目標(biāo)頁(yè)面了,即寫成下列這種形式,但是此舉會(huì)導(dǎo)致頁(yè)面一直無(wú)限循環(huán)調(diào)用導(dǎo)航守衛(wèi)。
if(sessionStorage.getItem('redirect')!=null){ var redirect=sessionStorage.getItem('redirect'); next({ path: redirect }); }else{ next(); }
原因是一定要調(diào)用next()來(lái)resolve這個(gè)導(dǎo)航守衛(wèi)鉤子,但是next()有參數(shù)和無(wú)參數(shù)是不一樣的,執(zhí)行效果依賴next()的調(diào)用參數(shù)。
next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是confirmed(確認(rèn)的)。
next()或者next({path:'/'})跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向next傳遞任意位置對(duì)象,且允許設(shè)置諸如repace:true、name:'home'之類的選項(xiàng)以及任何用在route-link的to prop或router.push中的選項(xiàng)。
注意:確保要調(diào)用next(),否則鉤子就不會(huì)被 resolved。
總結(jié)
到此這篇關(guān)于vue利用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁(yè)面的文章就介紹到這了,更多相關(guān)vue利用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在vue項(xiàng)目中promise解決回調(diào)地獄和并發(fā)請(qǐng)求的問(wèn)題
這篇文章主要介紹了在vue項(xiàng)目中promise解決回調(diào)地獄和并發(fā)請(qǐng)求的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue實(shí)現(xiàn)單點(diǎn)登錄的方式匯總
最近項(xiàng)目停工了,RageFrame的學(xué)習(xí)暫時(shí)告一段落,這一篇給大家分享下有關(guān)單點(diǎn)登錄的相關(guān)知識(shí),并提供一些demo給大家參考,對(duì)vue單點(diǎn)登錄的實(shí)現(xiàn)方式感興趣的朋友一起看看吧2021-11-11一看就會(huì)的vuex實(shí)現(xiàn)登錄驗(yàn)證(附案例)
這篇文章主要介紹了一看就會(huì)的vuex實(shí)現(xiàn)登錄驗(yàn)證(附案例),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01Vue偵測(cè)相關(guān)api的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue偵測(cè)相關(guān)api,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05vue3+ts重復(fù)參數(shù)提取成方法多處調(diào)用以及字段無(wú)值時(shí)不傳字段給后端問(wèn)題
在進(jìn)行API開發(fā)時(shí),優(yōu)化參數(shù)傳遞是一個(gè)重要的考量,傳統(tǒng)方法中,即使參數(shù)值為空,也會(huì)被包含在請(qǐng)求中發(fā)送給后端,這可能會(huì)導(dǎo)致不必要的數(shù)據(jù)處理,而優(yōu)化后的方法則只會(huì)傳遞那些實(shí)際有值的字段,從而提高數(shù)據(jù)傳輸?shù)挠行院秃蠖颂幚淼男?/div> 2024-10-10通過(guò)vue-cropper選取本地圖片自定義裁切圖片比例
這篇文章主要介紹了Vue選取本地圖片,自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲(chǔ)到Minio的操作方法
這篇文章主要介紹了Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲(chǔ)到Minio的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-06-06elementUi vue el-radio 監(jiān)聽選中變化的實(shí)例代碼
這篇文章主要介紹了elementUi vue el-radio 監(jiān)聽選中變化,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06最新評(píng)論