修复 Vue Router 的 cleanPath 函数

介绍

在这个项目中，你将学习如何通过修改 cleanPath 函数来修复 vue-router 库中的一个漏洞。vue-router 库是 Vue.js 应用程序中一种流行的路由解决方案，确保其正确运行非常重要，特别是对于像以多个斜杠开头的路径这样的边界情况。

👀 预览

🎯 任务

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

• 了解 vue-router 库中 cleanPath 函数存在的问题
• 为项目安装必要的依赖项
• 定位并修改 cleanPath 函数以修复问题
• 使用更新后的 cleanPath 函数重建项目
• 测试修复以确保问题得到解决

🏆 成果

完成这个项目后，你将能够：

• 识别和诊断第三方库中的问题
• 修改和更新第三方库中的代码以修复漏洞
• 使用更新后的代码重建并发布项目
• 测试修复以确保问题得到解决

设置项目结构

在这一步中，你将设置项目结构，并了解 vue-router 库中的问题以及如何修复它。

vue-router 库在 3.5.2 版本中有一个漏洞，即一个以多个斜杠（///）开头的路径实际上可能会重定向到另一个域名。这是因为该库中的 cleanPath 函数只替换两个斜杠，而不是所有多个斜杠。

要修复此问题，你需要修改 vue-router-3.5.2/src/util/path.js 文件中的 cleanPath 函数。

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

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

1. 点击 WebIDE 右下角的 Go Live 按钮来运行项目。
2. 在虚拟机顶部打开“Web 8080”并手动刷新，效果应如下所示：

3. 复制上面图片中的地址，在你的浏览器中打开一个新窗口，然后点击“Go to Foo”按钮，页面将跳转到谷歌页面。

修复 cleanPath 函数

1. 打开 vue-router-3.5.2/src/util/path.js 文件。

2. 找到 cleanPath 函数：

   export function cleanPath(path: string): string {
     return path.replace(/\/\//g, "/");
   }
   

3. 更新 cleanPath 函数，将所有多个连续斜杠替换为单个斜杠：

   export function cleanPath(path: string): string {
     return path.replace(/\/+/g, '/');
   }
   

   /\/+/g 正则表达式将匹配一个或多个连续的斜杠，并将它们替换为单个斜杠。

重新构建并测试项目

1. 在终端中，导航到 vue-router-3.5.2 目录。
2. 运行命令 npm install 来安装依赖项。这个过程可能需要一些时间，请耐心等待。（如果长时间卡住，请按 Ctrl+C 终止进程，然后再次运行此命令。）
3. 所有依赖项成功安装后，运行命令 npm run build 以使用更新后的 cleanPath 函数重建并发布项目。
4. 返回网页并刷新页面。
5. 点击“Go to Foo”按钮，你应该会看到页面不再重定向到谷歌页面，而是停留在本地应用程序上。

恭喜！你已通过更新 cleanPath 函数成功修复了 vue-router 库中的问题。

总结

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