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

前言

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

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

  • 下面就是我的代码,初看没什么问题啊(我本地新创建的项目,复现的问题);

    js 复制代码
    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页面;

  • 实现代码:

    js 复制代码
    const whileList = ['/404'];
    router.beforeEach((to, from, next) => {
        if (sessonStorgae.getItem('token')) {
            next();
        } else {
            if (whileList.inludes(to.path)) next();
            else next('/404');
        }
    });
  • 流程图:

    • 黄色代表首次访问页面;
    • 红色代表第二次访问页面;
相关推荐
江号软件分享32 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js