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

用戶登錄狀態驗證

路由配置

定義需要判斷登錄狀態的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()  }})