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

JavaScriptJavaScriptBeginner
立即练习

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

简介

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

👀 预览

修复漏洞演示动图

🎯 任务

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

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

🏆 成果

完成这个项目后,你将能够:

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

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/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/error_handle("`Error Handling`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") subgraph Lab Skills javascript/functions -.-> lab-445741{{"`修复路径匹配为空时的正确路径计算问题`"}} javascript/obj_manip -.-> lab-445741{{"`修复路径匹配为空时的正确路径计算问题`"}} javascript/error_handle -.-> lab-445741{{"`修复路径匹配为空时的正确路径计算问题`"}} javascript/dom_select -.-> lab-445741{{"`修复路径匹配为空时的正确路径计算问题`"}} javascript/dom_manip -.-> lab-445741{{"`修复路径匹配为空时的正确路径计算问题`"}} javascript/event_handle -.-> lab-445741{{"`修复路径匹配为空时的正确路径计算问题`"}} end

修复 fillParams 函数

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

├── vue-router-3.1.5
├── vue.js
└── index.html
  1. 点击WebIDE右下角的 Go Live 按钮来运行项目。
  2. 在虚拟机顶部打开 “Web 8080” 并手动刷新,效果应如下所示:
图片描述
  1. 将上图中的地址复制到浏览器中打开新窗口,分别点击 “[按钮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 中练习更多实验来提升你的技能。

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