vue-router作路由拦截时陷入死循环

今天分享一下使用vue-router作路由拦截时遇到的坑。

须要提早了解的api

1：router.beforeEach( to , from ,next) ;

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。若是所有钩子执行完了，则导航的状态就是 confirmed (确认的)。

  • next(false): 中断当前的导航。若是浏览器的 URL 改变了 (多是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

  • next('/') 或者 next({ path: '/' }): 跳转到一个不一样的地址。当前的导航被中断，而后进行一个新的导航。你能够向 next 传递任意位置对象，且容许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

  • next(error): (2.4.0+) 若是传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，不然钩子就不会被 resolved。

缘由

咱们通常在写拦截时会这样去写：

router.beforeEach((to, from, next) => {

  if(token) {
    next();
  }else {
    router.push({name:'login'})
  }

});

View Code

上诉的代码里的token ，是你须要存下的一个登陆身份，这里能够存在store里或者是localStorage里，固然 也能够每次进行登陆时 从后台获取。

这时 咱们发现，无论咱们在哪一个页面拦截进入了死循环。其实这算是一个vue-router的一个机制了，当咱们在router.push( {‘name’ : 'login'} ) 时又从新进入了咱们当前的这个router-beforEach事件里，此时又进行了tokne的判断，仍是没有token，致使又走到了router.push({name:'login'}) 里，而后就是一直死循环。

如何修改

以下：

router.beforeEach((to, from, next) => {
  
  if(Object.is(to.name,'login')) {
    next();
    return
  }
  
  if(token) {
    next();
  }else {
    router.push({name:'login'})
  }

});

View Code

这时 在第二次进入这个beforEach时，若是咱们须要跳转到的页面是 login 页面，就直接next() 而且再也不执行该函数。

总结

1：这个问题其实也是对 vue-router 的router.beforEach运行机制不了解致使

2：router.beforeEach ( ) 能够用来作前端的路由拦截，没有token时 就跳转到登陆页。

3：对应的还有 router.afterEach 等api 可前往：Vue-router API 进行查看