修复路径匹配为空时的正确路径计算问题

介绍

在这个项目中，你将学习如何修复 vue-router-3.1.5 库中的一个漏洞。该漏洞与 fillParams 函数有关，该函数负责在 URL 路径中填充参数。当 pathMatch 参数为空字符串时，它会影响正确路径的计算。

👀 预览

🎯 任务

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

• 如何在 vue-router-3.1.5/src/util/params.js 文件中定位 fillParams 函数
• 如何修改 fillParams 函数以解决 pathMatch 为空的问题
• 如何使用更新后的 fillParams 函数重建 vue-router 项目
• 如何通过刷新浏览器窗口并验证地址栏的正确行为来测试修复

🏆 成果

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

• 识别并修复第三方库中的漏洞
• 在进行代码更改后重建项目
• 测试修复以确保实现预期行为

修复 fillParams 函数

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

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

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

3. 将上图中的地址复制到浏览器中打开新窗口，分别点击“[按钮 1]”按钮和“[按钮 2]”按钮，地址栏的效果如下：

在这一步中，你将修复 vue-router-3.1.5/src/util/params.js 文件中的 fillParams 函数，以解决 pathMatch 为空的问题。

1. 打开 vue-router-3.1.5/src/util/params.js 文件。
2. 找到 fillParams 函数。
3. 在 if (params.pathMatch) params[0] = params.pathMatch 这行代码之后添加以下代码：

if (params.pathMatch === "") params[0] = "";

这段代码检查 params.pathMatch 是否为空字符串。如果是，函数将返回原始的 path，而不是尝试填充参数。

更新后的 fillParams 函数应如下所示：

export function fillParams(
  path: string,
  params:?Object,
  routeMsg: string
): string {
  params = params || {};
  try {
    const filler =
      regexpCompileCache[path] ||
      (regexpCompileCache[path] = Regexp.compile(path));

    // 修复 #2505 解析星号路由 { name: 'not-found', params: { pathMatch: '/not-found' }}
    if (params.pathMatch) params[0] = params.pathMatch;
    if (params.pathMatch === "") params[0] = "";

    return filler(params, { pretty: true });
  } catch (e) {
    if (process.env.NODE_ENV!== "production") {
      // 修复 #3072 如果 `pathMatch` 是字符串则不发出警告
      warn(
        typeof params.pathMatch === "string",
        `missing param for ${routeMsg}: ${e.message}`
      );
    }
    return "";
  } finally {
    // 如果添加了 0 则删除它
    delete params[0];
  }
}

重建并测试 vue-router 项目

在这一步中，你将通过刷新浏览器窗口来测试修复情况。

1. 在终端中打开 vue-router-3.1.5 目录。
2. 运行命令 npm install 来安装依赖项。这个过程可能需要一些时间，请耐心等待。（如果长时间卡住，请按 Ctrl+C 终止进程，然后再次运行此命令。）
3. 所有依赖项成功安装后，运行命令 npm run build 来重建并发布项目。
4. 返回浏览器窗口并刷新页面。
5. 再次点击“[按钮 1]”和“[按钮 2]”按钮，并观察地址栏的行为。

现在，即使 pathMatch 为空字符串，地址栏也应显示正确的路径。问题修复后的效果图片如下所示：

恭喜你！你已成功修复了 vue-router-3.1.5 库中的问题。

总结

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