vue登錄路由驗(yàn)證的實(shí)現(xiàn)
vue的項(xiàng)目的登錄狀態(tài)如果用vuex狀態(tài)管理，頁(yè)面一刷新vuex管理的狀態(tài)就會(huì)消失，這樣登錄路由驗(yàn)證就沒(méi)有意義了?？梢詫⒌卿浀臓顟B(tài)寫(xiě)到web Storage中進(jìn)行存儲(chǔ)管理。
步驟如下：
1、在登錄組件里，將登錄狀態(tài)寫(xiě)入web Storage里。(一般寫(xiě)入session Storage，會(huì)話關(guān)閉，存儲(chǔ)數(shù)據(jù)自動(dòng)刪除)
if('登錄成功')
{sessionStorage.setItem('accessToken' , 寫(xiě)入登錄成功返回的登錄令牌或者自定義的判斷字符串) }
2、在需要登錄驗(yàn)證的路由元信息里加入登錄驗(yàn)證標(biāo)識(shí)requiresAuth（自定義）
[html] view plain copy
routers: [
{ path: '/listInfo',
name: 'listInfo',
component: listInfo,
meta: { requiresAuth: true
}
}
]
3、在全局鉤子函數(shù)beforeEach中驗(yàn)證頁(yè)面是否需要登錄
router.beforeEach((to, from, next) => {
//to即將進(jìn)入的目標(biāo)路由對(duì)象，from當(dāng)前導(dǎo)航正要離開(kāi)的路由， next : 下一步執(zhí)行的函數(shù)鉤子
if(to.path === '/login') { next() } // 如果即將進(jìn)入登錄路由，則直接放行
else { //進(jìn)入的不是登錄路由
if(to.meta.requiresAuth && !sessionStorage.getItem('accessToken')) {next({ path: '/login' })}
//下一跳路由需要登錄驗(yàn)證，并且還未登錄，則路由定向到 登錄路由
else { next() }}
//如果不需要登錄驗(yàn)證，或者已經(jīng)登錄成功，則直接放行
}
注意點(diǎn)：beforeEach這個(gè)全局鉤子要放到全局組件的前面，放到全局組件的后面，Vue實(shí)例已經(jīng)加載完成。這時(shí)候直接在瀏覽器的地址欄輸入要去的路由，則不會(huì)定向到登錄路由。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue之Computed依賴收集與更新原理分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要給大家介紹了關(guān)于Vue2.x和Vue3.x的雙向綁定原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問(wèn)題(推薦)
這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問(wèn)題,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue3中setup語(yǔ)法糖下通用的分頁(yè)插件實(shí)例詳解
這篇文章主要介紹了vue3中setup語(yǔ)法糖下通用的分頁(yè)插件,實(shí)例代碼介紹了自定義分頁(yè)插件：PagePlugin.vue，文中提到了vue3中setup語(yǔ)法糖下父子組件之間的通信，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了VUE3 click點(diǎn)擊事件及修飾符的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue實(shí)現(xiàn)開(kāi)始時(shí)間和結(jié)束時(shí)間范圍查詢
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)開(kāi)始時(shí)間和結(jié)束時(shí)間的范圍查詢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之取值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟
今天小編就為大家分享一篇Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
electron?vue?模仿qq登錄界面功能實(shí)現(xiàn)
這篇文章主要介紹了electron?vue?模仿qq登錄界面,首先使用vuecli創(chuàng)建vue項(xiàng)目，安裝electron，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue.js刪除動(dòng)態(tài)綁定的radio的指定項(xiàng)
這篇文章主要介紹了vue.js刪除動(dòng)態(tài)綁定的radio的指定項(xiàng),需要的朋友可以參考下2017-06-06