从查询中检索对象参数

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何修复 vue-router 库中的一个漏洞,该漏洞在将对象推送到查询参数时会导致问题。本项目将指导你完成定位问题文件、识别问题并实施解决方案以修复漏洞的必要步骤。

👀 预览

vue router bug fix demo

🎯 任务

在这个项目中,你将学习:

  • 如何设置开发环境并安装必要的依赖项
  • 如何定位包含漏洞的文件并准备修复它
  • 如何修复 resolveQuery 函数中的漏洞
  • 如何重新构建并测试修复以确保问题得到解决

🏆 成果

完成本项目后,你将能够:

  • 识别并修复第三方库中的漏洞
  • 处理查询参数中的对象值
  • 验证修复以确保其按预期工作
  • 为开源项目做出贡献并提高你的问题解决和调试技能

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/ToolsandEnvironmentGroup(["`Tools and Environment`"]) javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/error_handle("`Error Handling`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("`Debugging`") subgraph Lab Skills javascript/obj_manip -.-> lab-445769{{"`从查询中检索对象参数`"}} javascript/error_handle -.-> lab-445769{{"`从查询中检索对象参数`"}} javascript/dom_manip -.-> lab-445769{{"`从查询中检索对象参数`"}} javascript/debugging -.-> lab-445769{{"`从查询中检索对象参数`"}} end

修复漏洞

首先,查看左侧文件的目录结构如下:

├── vue-router-3.4.1
├── vue.js
└── index.html

点击WebIDE右下角的Go Live按钮来运行项目。

接下来,在虚拟机顶部打开“Web 8080”并手动刷新,你将看到页面。

打开浏览器控制台并观察打印输出,先点击“test”按钮,然后点击“pushQuery”按钮。浏览器中的预览页面应如下所示:

初始效果

vue-router v3.4.1代码中存在一个漏洞,当使用this.$router.push时,若querykey对应的value是一个对象,它会被读取为字符串"[object object]",这使得我们无法正确获取对象的值。请修复此问题。

在这一步中,你将修复resolveQuery函数中的漏洞。

  1. 找到文件vue-router-3.4.1/src/util/query.js,并根据问题重现情况转到第41行来解决问题。

  2. castQueryParamValue函数应处理值为对象的情况。将函数修改如下:

    const castQueryParamValue = (value) =>
      typeof value == "number" ? "" + value : value;

重新构建并测试修复

在这一步中,你将重新构建vue-router-3.4.1包并测试修复情况。

  1. 在终端中,导航到vue-router-3.4.1目录。
  2. 运行命令npm install来安装依赖项。这个过程可能需要一些时间,请耐心等待。(如果长时间卡住,请按Ctrl+C终止进程,然后再次运行此命令。)
  3. 所有依赖项成功安装后,运行命令npm run build来重新构建并发布项目。
  4. 重启页面并点击“Web 8080”查看页面。
  5. 再次打开浏览器控制台并观察打印输出。首先点击“Test”按钮,然后点击“pushQuery”按钮,查看并测试修复的效果。
修复效果演示

修复现在应该能正确处理querykey对应的value为对象的情况,并且你应该会看到对象在控制台中正确显示。

✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在LabEx中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程