這篇文章主要介紹了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() } })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。