Vue——路由：登錄狀態的判斷

在搭建的系統中，最基本的登錄都是必須的，結合Vue的路由，涉及最多的就是登錄狀態的判斷。也就是說，如果一個組件要校驗登錄狀態，則在用戶初始進入時，就要去判斷用戶是否登錄，這里的校驗登錄狀態就是本篇的重點。

直接上實例，需要的拿走

一、router / index.js 路由中加校驗

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: login
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/componentA',
      name: 'componentA',
      component: componentA,
      meta:{
        requireLogin:true // 當前路由需要校驗，不需要就不用寫
      }
    },
    {
      path: '/componentB',
      name: 'componentB',
      component: componentB,
      meta:{
        requireLogin:true 
      }
    },{
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{
        requireLogin:true
      }
    },{
      path: '/orderManager',
      name: 'orderManager',
      component: orderManager,
      meta:{
        requireLogin:true
      }
    }
  ]
})

二、main.js 判斷該路由是否需要登錄權限

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireLogin)){  // 判斷該路由是否需要登錄權限
    if (sessionStorage.getItem('loginInfo')) {  // 判斷當前用戶的登錄信息loginInfo是否存在
      next();
    } else {
      next({
        path: '/'
      })
    }
  }else {
    next();
  }

})

三、login.vue 登錄組件內，登陸成功后的處理

this.$http({
   method: 'POST',
   url: this.userLoginUrl,
   data: param
}).then((res) => {
   sessionStorage.setItem('loginInfo',JSON.stringify(res.data.result));
   this.$router.push('/HelloWorld');  // 登陸成功后默認跳轉的路由
})

四、實現效果

1、在地址欄鍵入 http://localhost:8080 ，因為路由的原因，直接跳去登錄模塊，地址欄：http://localhost:8080/#/  

2、在地址欄繼續鍵入componentA ，即 http://localhost:8080/#/componentA 回車，因為 componentA 是需要校驗的模塊，現在未登錄，所以路由 path: '/' ，頁面還是跳去了登錄頁面。

        

 3、填寫數據登錄

 

點擊登錄，頁面按照 login.vue 中的默認跳轉路由，跳去 HelloWorld 模塊：