Vue路由守卫（拦截）

要解决的问题：最近做项目时，发现不登录账号和密码，在浏览器的地址栏直接输入路径也能跳转页面，就聊一下路由守卫吧，也叫路由拦截,话不多少 直接看操作
解决方案：在登录成功后，设置一个sessionStorage，通过这个sessionStorage来决定路由是否跳转
实现思路：点击登录按钮时向后端传递账号密码并设置sessionStorage，在router.js文件中设置全局路由守卫，通过这个sessionStorage来决定路由是否跳转

//点击登录按钮时向后端传递账号密码并设置sessionStorage
      login(){
        loginpage({
          user_id:this.email,
          password:this.password
        }).then(res =>{
          if(res.data.status ==0){
            // 登录成功后设置
            sessionStorage.setItem("flag", 1);          //名称可随意设置
            this.$router.push('/home')					//跳转到首页
           return  this.$vs.notify({color:'success',text:'登录成功',position:'top-center'})
          }else {
            return this.$vs.notify({color:'warning',text:'账号或密码输入误',position:'topcenter'})
          }}).catch(err =>{
          console.log(err)
        })
      },

在router.js文件中设置全局路由守卫

router.beforeEach((to,from,next)=>{
  let flag = sessionStorage.getItem('flag')       //获取点击登录按钮时所设置的 sessionStorage
  if(to.path === '/home'||to.path === '/algsmanager'){        //如果想要跳转home或者algsmanager页面必须判断有没有sessionStorage
      if(flag){              //如果有sessionStorage
        next();				//跳转
      }else {
        alert('您还没有登录，请先登录账户');   //没有就先登录
        next('/login')							//还在登录页
      }
  }
  else{
    next();
  }
  if(to.path === '/login'){				//如果跳转到了登录页面必须清空sessionStorage，否则在地址栏输入路径还是会跳转
    sessionStorage.clear();				//清空sessionStorage
  }
})

好了，今天的分享就到此结束了，欢迎大家评论交流。