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。这个操作会导致浏览器加载新的页面,可能会离开当前站点。
- 如果目标 URL 的
总结
这段代码的功能是在处理用户支付完成后的回调场景下,根据 recharge_back_URI
指定的路径或 URL,决定是本地导航到同源路径,还是重定向到其他域名的页面。它确保了在本地路径跳转时不会改变浏览器历史记录,而在跨域跳转时直接重定向用户。