前语

• 今天下午在调其他项目款式的时分，项目组长让我处理一个安全漏洞，漏洞的主要原因是没有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');
      }
  });
  

• 流程图：
  • 黄色代表初次拜访页面；
  • 赤色代表第2次拜访页面；