在Vue中如何处理URL查询参数中的特殊字符转义问题？

Vue 中处理 URL 查询参数特殊字符转义

在单点登录场景中，URL 参数常包含用于身份验证的 id 和 key 等信息。 例如，URL 可能类似于 http://localhost:8088/taxbureaulogin?id=1206&key=ze9+ticzsrej...。 浏览器可能会对其中的特殊字符进行转义，例如 + 变为空格，/ 也可能被转义。 前端 Vue 应用需要正确处理这些特殊字符，以保证数据完整性。

通常，我们使用 URLSearchParams 获取 URL 查询参数：

let searchParams = new URLSearchParams(window.location.search);

然而，此方法获取的参数可能已进行浏览器转义。 例如，ze9+ticzsrejfujj/bxjcq== 可能变成 ze9 ticzsrejfujj/bxjcq==。

解决方法：

立即学习“前端免费学习笔记（深入）”；

1. 后端处理 (推荐)： 后端在生成 token 时，建议使用 base64url 编码，避免 +、/ 和 = 等特殊字符。这是最理想的解决方案，能从根本上解决问题。

   

   Article Forge

   行业文案AI写作软件，可自动为特定主题或行业生成内容

   下载

2. 前端处理 (如果后端无法修改)： 前端可以使用 encodeURIComponent 对获取到的 token 值进行编码，然后再传递给后端。 需要注意的是，Vue Router 不同版本的行为有所不同：

   • Vue Router 3.x: Vue Router 3.x 会自动解码特殊字符。 使用 location.href 获取的 URL 信息也是已转义的字符串。 URLSearchParams 获取到的参数也已经解码。 因此，需要在传递给后端之前使用 encodeURIComponent 编码。

   • Vue Router 4.x: Vue Router 4.x 对 URL 参数的处理进行了优化，$route 属性中的参数编码更一致。 path 和 fullPath 中的值不再被解码，hash 会被解码。 在使用 push、resolve 和 replace 方法时，必须对路径进行编码。

   以下代码演示了在 Vue Router 3.x 中使用 encodeURIComponent 的示例：

   let searchParams = new URLSearchParams(window.location.search);
   let key = searchParams.get('key');
   let encodedKey = encodeURIComponent(key); // 编码后传递给后端

3. 利用 $route 属性 (Vue Router 4.x): 在 Vue Router 4.x 中，直接使用 $route 属性获取参数，无需额外编码。

总而言之，建议优先选择后端处理方法，以确保数据的完整性和安全性。 如果后端无法修改，则根据 Vue Router 版本选择合适的前端处理方法。