Vue路由拦截（工作中100%会遇到的问题）代码演示

路由守卫

在Vue中分为全局前置守卫 ，和全局后置钩子 ，相对应的说明可以查看官网。路由守卫我们一般用来拦截路由请求，对不同的路由进行不同处理。最常见的就是配合axios对用户登录进行一个权限操作。

拦截规则

通常在项目里，我们需要用户进行登录，才能让用户查看项目。在后台管理系统中，会根据不同的用户权限展示不同的内容。

在用户访问页面之前，我们通过全局前置守卫对路由进行拦截，看看你是不是可以通过。通过的标准是否登录，如果登录就通过放行，没有通过就打回。

注意

在使用beforeEach 钩子函数的时候可能会遇到一个栈溢出问题，出现了无限的循环。这是因为判断的条件出了问题。

• next() 表示路由成功，直接进入to路由，不会再次调用router.beforeEach()
• next(‘login’) 表示路由拦截成功，重定向至login，会再次调用router.beforeEach()

也就是说beforeEach()必须调用next(),否则就会出现无限循环，
next() 和 next(‘xxx’) 是不一样的，区别就是前者不会再次调用router.beforeEach()，后者会！！！，这点就是造成无限循环的原因。
那么解决方法是，增加判断。

直接上代码
在router 中的 index.js中

router.beforeEach((to,from,next) => {
  let state = window.sessionStorage.getItem("state");
  if(to.path ==="/login" && state == 1 ) {
      next('/')
  } 
  else if(state != 1 && to.path != "/login") {
     next('/login');
  }
 return next();
})

账号密码输入正确的时候 （设置webStorage）

      Login() {
          if((this.userName != "" && this.userName == "zhuqiang") && (this.password != "" && this.password == "123")) {
              alert("登录成功");
              window.sessionStorage.setItem("state",1)
              this.$router.push({path:"/"})
          } else {
          	  alert("登录失败");
              window.sessionStorage.setItem("state",0)
          }
      }

有这样一个业务场景，如果用户在选择了商品后，需要进行购买时，如果没有登录，这时我们进行了登录跳转，在登录成功后，需要跳转到前一个路由，可以通过history 获取上一个路由，然后在beforeEach 动态的给定登录成功后进行的跳转路由。可以将这个跳转的路由设置一个默认值，如果存在histroy就跳转动态的，没有就跳转默认的。