[问题记录] vue-router中导航守卫默认跳转login失败

问题

做博客后台的时候发现一个问题,在没启动服务的情况下,后台在 router 中并未读取到配置的情况下,应该默认跳转 login 页面。但是页面始终不跳转,并且伴随多个执行错误弹窗。

javascript 复制代码
router.beforeEach(async (to, from, next) => {
    Nprogress.start();
    // 获取系统设置数据
    try {
        const systemData = await getSystem();
    } catch (e) {
        next({name: 'login'})
    }
})

问题解决

javascript 复制代码
router.beforeEach(async (to, from, next) => {
    Nprogress.start();
    // 获取系统设置数据
    try {
        const systemData = await getSystem();
    } catch (e) {
        if (to.name !== 'login') {
            next({name: 'login'})
        }else {
            next();
        }
    }
})

问题分析

其实出现不断报错的情况,虽然在一定次数以后就终止了,但是仍然可以判断为是出现了死循环。(PS:一定次数后终止了应该是Vue框架的优化)

查阅 官方文档 发现其实早已写明:

第三个参数 next ,可以出现多于一次,但是逻辑路径不能重叠。

我在这个地方的死循环就是因为next虽然指定了跳转login但是仍然出现了逻辑路径重叠。

相关推荐
codeGoogle4 小时前
自研 IM 还是选择第三方 SDK?企业开发者应该如何权衡?
前端·后端·程序员
用户938515635075 小时前
React Context 与自定义 Hook 从底层到实践:「跨层级通信 + 副作用封装」全解析
前端·javascript·react.js
滴滴答答哒5 小时前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js
其美杰布-富贵-李5 小时前
04 watch 与 Vue 响应式数据流
前端·javascript·vue.js
赵大仁7 小时前
生成式 UI 实战:用 JSON Schema + React 动态渲染 AI 界面
前端·ai·react·next.js·前端架构·生成式ui
kyriewen8 小时前
我排查了一个React内存泄漏——罪魁祸首是这3个被忽略的清理函数
前端·javascript·面试
IT_陈寒8 小时前
我又被JavaScript的隐式类型转换坑了
前端·人工智能·后端
其美杰布-富贵-李8 小时前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
OpenTiny社区9 小时前
GenUI SDK v1.3.0 发布|多框架兼容,一键换物料,渲染器 & 演练场全面增强!
前端·ai编程
用户938515635079 小时前
useRef + Web Worker 实战:React 如何优雅地拥抱多线程
前端·javascript·react.js