我要评论
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==。
解决方法：
-
后端处理 (推荐)： 后端在生成 token 时，建议使用 base64url 编码，避免 +、/ 和 = 等特殊字符。这是最理想的解决方案，能从根本上解决问题。
-
前端处理 (如果后端无法修改)： 前端可以使用 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); // 编码后传递给后端登录后复制 -
-
利用 $route 属性 (vue router 4.x): 在 vue router 4.x 中，直接使用 $route 属性获取参数，无需额外编码。
总而言之，建议优先选择后端处理方法，以确保数据的完整性和安全性。 如果后端无法修改，则根据 vue router 版本选择合适的前端处理方法。
以上就是在vue中如何处理url查询参数中的特殊字符转义问题？的详细内容，更多请关注代码网其它相关文章！
发表评论