Vue 路由攔截（對某些頁面需要登陸才能訪問）

前言

做項目的時候有個需求，就是發現沒有登錄，竟然也可以進入我的主頁，這樣肯定是不能容忍的。於是就要讓他進入主頁的時候，加個判斷是否有登錄，若沒有登錄，則返回登錄界面，登錄成功后還可以跳轉到之前進入的頁面；若登錄，則愛點哪里就點哪里，也就是vue中的路由攔截。

PS：可能有點啰嗦，但是講得還算清楚，若只想實現功能，直接復制代碼去實戰也可以啦，寫這篇的時候是10.24，我們程序員的節日，先祝各位大佬節日快樂，無BUG，今晚實現這個功能也是很快樂的呢，特意寫篇博客記錄一下，希望能幫助到你們！

 

路由攔截其實很簡單：1）加上meta。2）router.beforeEach函數加上判斷即可，具體往下瞧哦~

接下來進入代碼實現環節：

   1.首先在需要攔截的頁面的路由上加一個標識，meta，例如

在全局路由上添加meta：

 {path:"/index",name:'index',component:ShowBlogs,meta:{requireAuth:true}}, 

 

   2.然后在全局路由那里做下判斷（一般路由router寫在main.js下），如果meta為真，就進入下一個判斷，登錄的時候我是有將賬號username存儲起來，於是我根據這一點，如果username不存在，那他就是沒登錄，即滿足meta為真&&username不存在，就讓他路由跳轉到登錄頁面

new Vue({
  el: '#app',
  },
  router:router,
  store,
  components: { App },
  template: '<App/>',
   created () {
    router.beforeEach((to, from, next) => {
    var _this = this;
    
   if(to.meta.requireAuth ){

       if(JSON.parse(localStorage.getItem("login"))==null){
          console.log('沒有登錄')
          _this.$router.push({path: '/',query: {redirect: to.fullPath}})
          next()
       } else {
         
          _this.$router.push({path: to.fullPath})
          next()
        }
    }
    else {
     
      next();
    }
});
    
  }
})

 

敲黑板啦   親，注意集中力啦

首先：1）要注意this的指向，一開始用this.$router得到是unfinded，原來是this的指向有問題，所以要存儲一下this的指向

              2）這樣我是放在vue的created創建函數下，也可以放在外面

　　　　3）這點是最重要的一點，先來看一下現在的邏輯：首先路由點擊跳轉另外一個路由的時候會先進入beforeEach這個生命函數中，然后判斷這個路由是否是需要攔截的路由（根據meta），如果是就進入第二層判斷，存儲中是否有username，如果沒有就跳到‘/’，也就是我們的登錄頁面，進入登錄頁面，又是一個新的路由，又判斷登錄頁面是否是需要攔截的路由，否，成功跳入。登錄頁面那登錄成功就要跳到/index這個路由，先進入beforeEach，是需要攔截的，這次有username，就路由push到index，然后要跳到index路由，又進入beforeEach，遞歸了，大家發現沒有，一直重復跳到index路由，出不去，我也是console.log打印了1000多下，內存溢出才發現。所以我需要用一個變量來控制，如下圖才是正確的操作：

 

正確的寫法：

new Vue({
  el: '#app',
  data(){
    return{
      requireAuthNum:1
    }
  },
  router:router,
  store,
  components: { App },
  template: '<App/>',
   created () {
    router.beforeEach((to, from, next) => {
    var _this = this;
  // if (to.matched.some(record => record.meta.requireAuth)){  // 判斷該路由是否需要登錄權限
   if(to.meta.requireAuth && _this.requireAuthNum==1){

       if(JSON.parse(localStorage.getItem("login"))==null){
          console.log('沒有登錄')
          _this.$router.push({path: '/',query: {redirect: to.fullPath}})
          next()
       } else {
          _this.requireAuthNum++;
          _this.$router.push({path: to.fullPath})
          next()
        }
    }
    else {
      _this.requireAuthNum = 1;
      next();
    }
});
    
  }
})

 

　　　　4）這次不只是meta為真就可以，還需要變量requireAuthNum為1才可以進入，理一下思路：點擊index路由，先進入beforeEach，是需要攔截的，沒有username，跳到登錄頁面，登錄頁面成功就跳到index頁面，新的路由，來，先進入beforeEach，是需要攔截的且requireAuthNum剛開始為1，有username，滿足條件，跳到/index路由，注意，這次requireAuthNum++，變成2，新的路由，先進入beforeEach，是需要攔截的，這時的requireAuthNum++了，不為1，跳出判斷，於是就成功跳到index路由。

　　　　5）上面的邏輯需要大家好好看一下哦，跟着本博主的思路走，邊看代碼邊看文字的說明，還有一點小細節：就是我是index頁面因為沒有登錄而跳到登錄頁面，如果登錄成功應該跳到哪里，是跳到index嗎，那要是我是add頁面跳到登錄頁面，那是不是應該登錄成功就跳到add頁面，所以登錄頁面那的跳轉不能寫死，以前我登錄成功就跳到index，如：_this.$router.push({path: '/index'});現在加上路由攔截就需要寫成動態了，不知道大家有沒有發現我途中的112行那的username不存在跳到登錄頁面，還加上query: {redirect: to.fullPath}，此時的路徑是/?redirect:/.......，我這里是此時的路徑是/?redirect:/index，主要是存儲我到底是哪個頁面跳轉過來的，登錄頁面那好做判斷，login.vue判斷如下：

localStorage.setItem("login",JSON.stringify(login));
            
                let redirect = decodeURIComponent(this.$route.query.redirect || '/');
              
                console.log(redirect);
                if(redirect == '/'){
                    _this.$router.push({path: '/index'});
                    console.log('login');
                }else{
                    _this.$router.push({path: redirect});
                    console.log('重定向回去')
                }

this.$route.query會自動編碼，所以我需要decodeURIComponent給我解碼。

redirect 判斷是不是別的頁面跳轉過來的，此時的redirect打印出來的是/index，（攜帶參數就是其他頁面跳過來的）這樣我們就可以做判斷 。

感謝文章：https://blog.csdn.net/Mote123/article/details/92635850、

https://www.jianshu.com/p/2146341f75c6

收工，晚安！