vue登錄路由驗證（轉）

轉載自：https://blog.csdn.net/github_39088222/article/details/80749219

vue的項目的登錄狀態（如果用vuex狀態管理，頁面一刷新vuex管理的狀態就會消失，這樣登錄路由驗證沒有意義），可以將登錄的狀態寫到web Storage中進行存儲管理。

1、在登錄組件里，將登錄狀態寫入web Storage里。(一般寫入session Storage，會話關閉，存儲數據自動刪除)

if('登錄成功')
 {sessionStorage.setItem('accessToken' , 寫入登錄成功返回的登錄令牌或者自定義的判斷字符串)} 

2、在全局main.js鈎子函數beforeEach中驗證頁面是否需要登錄

router.beforeEach((to, from, next) => { 
    /to即將進入的目標路由對象，from當前導航正要離開的路由， next : 下一步執行的函數鈎子 
    if(to.path === '/login') { 
        next()   // 如果即將進入登錄路由，則直接放行 
    }else { //進入的不是登錄路由 
        if(to.meta.requiresAuth && !sessionStorage.getItem('accessToken')) {
        next({ path: '/login' })   //下一跳路由需要登錄驗證，並且還未登錄，則路由定向到 登錄路由
    } else { 
        next()  //如果不需要登錄驗證，或者已經登錄成功，則直接放行
    }
　} 
}
        

注意點：beforeEach這個全局鈎子要放到 初始化全局組件 的前面。