前端开发 - 【VueRouter】- 踩坑日记：路由守卫中使用next的时候，超出最大调用堆栈大小（Maximum call stack size exce）

前言

• 今天下午在调别的项目样式的时候，项目组长让我解决一个安全漏洞，漏洞的主要原因是没有token也能访问项目页面；

• 按照常理来说，没有token就表示当前用户没有权限访问，所以想要解决问题。还是要去路由前置守卫中做判断；

• 下面就是我的代码，初看没什么问题啊（我本地新创建的项目，复现的问题）；

  const routes = [
      {
          path: '/',
          name: 'home',
          component: HomeView
      },
      {
          path: '/about',
          name: 'about',
          component: () => import('../views/AboutView.vue')
      },
      {
          path: '/404',
          name: '404',
          component: () => import('../views/404/404.vue')
      }
  ];
  
  const router = new VueRouter({
      routes
  });
  
  router.beforeEach((to, from, next) => {
      if (sessonStorage.getItem('token')) {
          next();
      } else {
          next('/404');
      }
  });

• 当我跑起项目测试的时候，没看控制台之前，心里那是一个美滋滋，心想这么简单就解决了，又能摸鱼了😊的时候；

• 打开控制台，一看报错了，起初以为是小问题，没当回事，把报错信息翻译一看"超出最大调用堆栈大小"，我直接傻眼了，直接懵逼了啊，直接就是一句我屮；

• 

• 下面就来看看我是怎么排查问题的吧，希望对你有用；

一、分析问题

• 第一步就是根据报错信息百度；
• 大概百度得到的结果就是以下几点：
  • 路由重定向；
  • 路由规则；
  • 组件导入；
• 我敢肯定我的路由重定向和路由规则还有组件的导入是绝对不可能出错的，所以问题还是出现在路由守卫中，判断条件的问题；
• 按照我的思路，我是想让他没有权限的时候，跳转到404页面，以上就是初步的代码，但是运行的时候报错了；

下面就来说一下为什么报错？

• 当访问页面的时候，会进入路由守卫，进入之后，先判断有没有token，如果没有的话，会进入else，接着会去访问404页面；
• 问题就出现在这个else，当要去访问404页面的时候，它进入路由守卫，又会去判断有没有token，没有token进入else，又去访问404页面，就这样一直循环，造成了死循环；
• 简单画一个流程图，看着更清楚：（一直走的是红色的这条线）

二、解决问题

• 定义一个白名单；

• 当第一次访问页面的时候，没有token，进入else，判断是否在白名单中，如果在白名单中，直接next，如果不在访问404页面；

• 实现代码：

  const whileList = ['/404'];
  router.beforeEach((to, from, next) => {
      if (sessonStorgae.getItem('token')) {
          next();
      } else {
          if (whileList.inludes(to.path)) next();
          else next('/404');
      }
  });

• 流程图：

  • 黄色代表首次访问页面；
  • 红色代表第二次访问页面；