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，（携带参数就是其他页面跳过来的）这样我们就可以做判断 。
收工，晚安！

Vue 路由拦截（对某些页面需要登陆才能访问）

猜你喜欢