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