這篇文章將為大家詳細(xì)講解有關(guān)如何使用vue判斷驗(yàn)證用戶登錄狀態(tài)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了禹州免費(fèi)建站歡迎大家使用！

使用vue判斷驗(yàn)證用戶登錄狀態(tài)

• 導(dǎo)航鉤子類似于生命周期鉤子，包含路由進(jìn)入前，進(jìn)入后，更新時(shí)，退出前等幾個(gè)周期，主要用于控制導(dǎo)航的前進(jìn)后退或跳轉(zhuǎn)等。

• 其中router.beforeEach就是路由進(jìn)入前的周期，同時(shí)有路由的來源和去向兩個(gè)參數(shù)，可以判斷和控制當(dāng)前路由的走向和重定向。

• 一般router.beforeEach配合vuex全局狀態(tài)儲(chǔ)存使用，驗(yàn)證用戶登錄狀態(tài)。也可以結(jié)合sessionStorage 和localStorage使用，原理相同。

用戶登錄狀態(tài)驗(yàn)證

路由配置

定義需要判斷登錄狀態(tài)的meta 屬性auth

const routes =[
  {
    path:'/',
    component: resolve => require(['../components/mainTem/Filtrate.vue'],resolve),
    meta:{auth:true,keepAlive: false},
    name:'Filtrate'
  },//首頁(yè)
  {
    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'
  },//個(gè)人中心
  {
    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'
  }
]

監(jiān)聽

我用的是localStorage儲(chǔ)存的用戶token值。

業(yè)務(wù)邏輯：用戶沒有l(wèi)ocalStorage說明是第一次登錄，則直接跳到登錄頁(yè)面，在登錄頁(yè)面儲(chǔ)存token值，存在localStorage，用戶關(guān)閉頁(yè)面后，在24小時(shí)內(nèi)，再次打開頁(yè)面直接進(jìn)入主頁(yè)面，通過localStorage去判斷當(dāng)前token是否有效，如果已失效，則提示登錄已超時(shí)，重新跳到登錄頁(yè)面。

meta
只有在路由中設(shè)置了meta auto屬性為true的才判斷，以上路由全部由設(shè)置

to
to為向后走的路由對(duì)象，包括路由的完整信息

from
from為從哪跳來的路由對(duì)象

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

/** 驗(yàn)證用戶是否登錄 **/
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')){

     //訪問服務(wù)器緩存數(shù)據(jù)，判斷當(dāng)前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已超時(shí)，請(qǐng)重新登錄');
            next('/Login');
          }
      })
     }else{
      next('/Login');
     }

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

關(guān)于“如何使用vue判斷驗(yàn)證用戶登錄狀態(tài)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。