beforeEach钩子与无限循环问题

 

全局前置守卫beforeEach

beforeEach 守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

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

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

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。确保要调用 next 方法，否则钩子就不会被 resolved

• router.beforeEach(async (to, from, next) => {
    const localId = localStorage.getItem('userId');
  
    if (to.name === 'login') { // 访问login,缓存判断
      if (localId) { //有缓存，访问主页
        next({ name: 'main' });
      } else {// 无缓存，跳转登录页
        next();
      }
    } else if (to.name !== 'login' && localId) { // 访问非登录页，有缓存，继续跳转该页面
      next();
    } else if (to.name !== 'login' && !localId) {
      next({ name: 'login' }); // 访问非登录页，无缓存，跳转login
    }
  });
  

  　　在这里需要注意的是，通过next({name:'xxx'})，就要通过to.name ==='login'去判断；如果是通过next({path:'xxx'})跳转，就要通过to.path==='/login'去判断，他们必须一一对应。这两种方式是改变路由的跳转路径，但是不管怎么样，最后一定要执行next()才可以被resolved。如果next()没有被执行，就会出现无限循环，最后浏览器就崩了！网上有很多文章写了关于beforeEach无限循环的问题，终其原因就是没有执行到next()。如果你的beforeEach出现了无限循环，耐心地在beforeEach函数中打上断点，检查自己的逻辑是不是没对。
  
  另外需要说的一点是，在beforeEach里可能会有异步请求，如后台请求菜单，获取用户信息等等，需要在调用store的方法，调用时，beforeEach使用async修饰(如上文代码所示)，函数调用时加上await关键字使得同步执行，如 await store.dispatch('getMenus', localId);这里也算是一个坑，需要格外注意。

 

总结一下

• beforeEach收尾中必须要执行next()才不会出现无限循环
• 路由跳转时，属性需要一致，to.name/to.path等
• 在beforeEach中共调用store的异步函数，beforeEach加上async修饰，函数调用使用await store.dispatch， await store.dispatch('getMenus', localId);
  
  

　如果文章对你有帮助，麻烦帮忙点个赞哦！嘿嘿！做一个靠谱的技术博主！