vue登錄路由驗證的實現(xiàn)
更新時間：2017年12月13日 11:59:35 作者：羞羞的鐵拳
這篇文章主要為大家詳細(xì)介紹了vue登錄路由驗證的實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue的項目的登錄狀態(tài)如果用vuex狀態(tài)管理，頁面一刷新vuex管理的狀態(tài)就會消失，這樣登錄路由驗證就沒有意義了?？梢詫⒌卿浀臓顟B(tài)寫到web Storage中進(jìn)行存儲管理。
步驟如下：
1、在登錄組件里，將登錄狀態(tài)寫入web Storage里。(一般寫入session Storage，會話關(guān)閉，存儲數(shù)據(jù)自動刪除)
if('登錄成功')
{sessionStorage.setItem('accessToken' , 寫入登錄成功返回的登錄令牌或者自定義的判斷字符串) }
2、在需要登錄驗證的路由元信息里加入登錄驗證標(biāo)識requiresAuth（自定義）
[html] view plain copy
routers: [
{ path: '/listInfo',
name: 'listInfo',
component: listInfo,
meta: { requiresAuth: true
}
}
]
3、在全局鉤子函數(shù)beforeEach中驗證頁面是否需要登錄
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' })}
//下一跳路由需要登錄驗證，并且還未登錄，則路由定向到 登錄路由
else { next() }}
//如果不需要登錄驗證，或者已經(jīng)登錄成功，則直接放行
}
注意點：beforeEach這個全局鉤子要放到全局組件的前面，放到全局組件的后面，Vue實例已經(jīng)加載完成。這時候直接在瀏覽器的地址欄輸入要去的路由，則不會定向到登錄路由。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中provide和inject的用法及說明(vue組件爺孫傳值)
這篇文章主要介紹了vue中provide和inject的用法及說明(vue組件爺孫傳值)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
解決在Vue中使用axios用form表單出現(xiàn)的問題
今天小編就為大家分享一篇解決在Vue中使用axios用form表單出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue-element換膚所有主題色和基礎(chǔ)色均可實現(xiàn)自主配置
這篇文章主要介紹了vue-element換膚所有主題色和基礎(chǔ)色均可實現(xiàn)自主配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式
這篇文章主要介紹了vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本文就討論下怎么實現(xiàn)一個處理.vue文件的loader，以及用loader處理完.vue文件怎么把內(nèi)容渲染在瀏覽器上并實現(xiàn)簡單的響應(yīng)式，對vue文件解析器相關(guān)知識感興趣的朋友一起看看吧2022-06-06
在Vue.js開發(fā)中,經(jīng)常會遇到需要展示搜索和列表的需求,為了提高代碼復(fù)用性和開發(fā)效率,我們可以封裝一個可配置的搜索列表組件,下面我們就來講講如何實現(xiàn)這樣一個組件吧2023-08-08
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了Vue3哈希模式實現(xiàn)錨點導(dǎo)航方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
在處理Konva中的異步加載順序問題時,確保在圖像加載完成后再添加其他元素是關(guān)鍵,通過將回調(diào)函數(shù)放在imageObj.onload中,并正確處理變量捕獲,我們可以確保文本總是繪制在圖片之上,這不僅解決了顯示順序的問題,也為未來的調(diào)試提供了明確的方向,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了Vue中的slot使用插槽分發(fā)內(nèi)容的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03