从查询中检索对象参数

介绍

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

👀 预览

🎯 任务

在这个项目中，你将学习：

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

🏆 成果

完成本项目后，你将能够：

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

修复漏洞

首先，查看左侧文件的目录结构如下：

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

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

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

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

vue-router v3.4.1 代码中存在一个漏洞，当使用this.$router.push时，若query中key对应的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”按钮，查看并测试修复的效果。

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

总结

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