vue router.beforeEach跳轉路由驗證用戶登錄狀態

使用vue判斷驗證用戶登錄狀態

• 導航鉤子類似於生命週期鉤子，包含路由進入前，進入後，更新時，退出前等幾個週期，主要用於控制導航的前進後退或跳轉等。

• 其中router.beforeEach就是路由進入前的週期，同時有路由的來源和去向兩個參數，可以判斷和控制當前路由的走向和重定向。

• 一般router.beforeEach配合vuex全局狀態儲存使用，驗證用戶登錄狀態。也可以結合sessionStorage 和localStorage使用，原理相同。

用戶登錄狀態驗證

路由配置

定義需要判斷登錄狀態的meta 屬性auth

const routes =[
    {
        path:'/',
        component: resolve => require(['../components/mainTem/Filtrate.vue'],resolve),
        meta:{auth:true,keepAlive: false},
        name:'Filtrate'
    },//首頁
    {
        path:'/Home',
        component: resolve => require(['../components/mainTem/Home.vue'],resolve),
        meta:{auth:true,keepAlive: true },
        name:'Home'
    },//登錄
    {
        path:'/Login',
        component: resolve => require(['../components/mainTem/Login.vue'],resolve),
        meta:{auth:true,keepAlive: false},
        name:'Login'
    },//最新案例
    {
        path:'/NewCase',
        component: resolve => require(['../components/mainTem/NewCase.vue'],resolve),
        meta:{auth:true,keepAlive: true},
        name:'NewCase'
    },//推薦
    {
        path:'/Recommend',
        component: resolve => require(['../components/mainTem/Recommend.vue'],resolve),
        meta:{auth:true,keepAlive: true},
        name:'Recommend'
    },//個人中心
    {
        path:'/User',
        component: resolve => require(['../components/mainTem/User.vue'],resolve),
        meta:{auth:true,keepAlive: true},
        name:'User'
    },//篩選
    {
        path:'/Filtrate',
        component: resolve => require(['../components/mainTem/Filtrate.vue'],resolve),
        meta:{auth:true,keepAlive: false},
        name:'Filtrate'
    },
    {//詳情
        path:'/Detail',
        component: resolve => require(['../components/mainTem/Detail.vue'],resolve),
        meta:{auth:true,keepAlive: false},
        name:'Detail'
    }
]

監聽

我用的是localStorage儲存的用戶token值。
業務邏輯：用戶沒有localStorage說明是第一次登錄，則直接跳到登錄頁面，在登錄頁面儲存token值，存在localStorage，用戶關閉頁面後，在24小時內，再次打開頁面直接進入主頁面，通過localStorage去判斷當前token是否有效，如果已失效，則提示登錄已超時，重新跳到登錄頁面。

meta

只有在路由中設置了meta auto屬性爲true的才判斷，以上路由全部由設置

to

to爲向後走的路由對象，包括路由的完整信息

from

from爲從哪跳來的路由對象

next()

next()控制路由向下走，重新定義路由跳轉的路由next(‘路由路徑)

/** 驗證用戶是否登錄 **/
router.beforeEach((to,from,next) => {
    if(to.matched.some( m => m.meta.auth)) {
        // console.log("先判斷是否登錄");
        if(to.name=='Login'){
            next();
        }else{
          if(localStorage.getItem('token')){

          //訪問服務器緩存數據，判斷當前token是否失效
            Vue.http.get("http:xxxx/Login/UserIsLogin?token="+localStorage.getItem('token')+"&url="+to.name,{withCredentials: true}).then(response => response.json()).then(num => {
                    // console.log('是否登錄',num);
                    if(num.code==1001){
                        next();
                    }else{
                        alert('您的token已超時，請重新登錄');
                        next('/Login');
                    }
            })
          }else{
            next('/Login');
          }

        }
  　} else {
        console.log("請先登錄");
        next()
    }
})