Bootstrap

支付后全局变量改变

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

总结

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

;