支付后全局变量改变

本文主要是介绍支付后全局变量改变，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

if (router.query.recharge_back_URI) {const _url = decodeURIComponent(router.query.recharge_back_URI as string);const url = new URL(_url, location.href);if (url.origin === location.origin) {router.replace(url.pathname);} else {location.href = url.href;}}

解释

这段代码的作用是检查 router.query 中是否包含 recharge_back_URI 参数，并根据这个参数的值执行相应的导航或重定向操作。

代码详解

if (router.query.recharge_back_URI) {const _url = decodeURIComponent(router.query.recharge_back_URI as string);const url = new URL(_url, location.href);if (url.origin === location.origin) {router.replace(url.pathname);} else {location.href = url.href;}
}

1. 检查 recharge_back_URI 参数

if (router.query.recharge_back_URI) {

• 这行代码首先检查 router.query 对象中是否存在 recharge_back_URI 参数。
• router.query 是 Next.js 路由对象，用于获取 URL 中的查询参数。如果存在 recharge_back_URI，则继续执行后续操作。

2. 解码 URL

const _url = decodeURIComponent(router.query.recharge_back_URI as string);

• 这一行将 recharge_back_URI 参数的值进行 URL 解码。decodeURIComponent 用于将编码过的 URI 部分解码为正常的字符串形式。

3. 创建 URL 对象

const url = new URL(_url, location.href);

• 这里使用 URL 构造函数来创建一个 URL 对象，传入 _url 作为相对或绝对 URL，location.href 作为基础 URL。
• URL 构造函数可以处理相对 URL，并自动将其解析为完整的绝对 URL。

4. 判断目标 URL 与当前页面的 origin 是否一致

if (url.origin === location.origin) {router.replace(url.pathname);
} else {location.href = url.href;
}

• url.origin 和 location.origin 是 URL 的协议、域名和端口的组合（例如 https://example.com）。
• 这里的逻辑是：
  • 如果目标 URL 的 origin 与当前页面的 origin 相同，则使用 router.replace 方法将用户导航到目标 URL 的路径部分 (url.pathname)。router.replace 会替换浏览器历史记录中的当前条目，而不是创建一个新的条目。
  • 如果目标 URL 的 origin 不同，则直接通过 location.href 将页面重定向到目标 URL。这个操作会导致浏览器加载新的页面，可能会离开当前站点。

总结

这段代码的功能是在处理用户支付完成后的回调场景下，根据 recharge_back_URI 指定的路径或 URL，决定是本地导航到同源路径，还是重定向到其他域名的页面。它确保了在本地路径跳转时不会改变浏览器历史记录，而在跨域跳转时直接重定向用户。

这篇关于支付后全局变量改变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---