前端实现跳转外链的几种方式

前端实现跳转外链并携带参数的几种方式（例如：携带token）：
一、第一种方式构建目标外部链接，并将token作为URL参数附加上去

1. //encodeURIComponent以防止潜在的XSS攻击或URL解析
2. //http://127.0.0.1:5173替换为要打开的外链地址
3. const externalLink = 'http://127.0.0.1:5173/?token=' + encodeURIComponent(token);
4. // 使用window.location.href跳转到外部链接，当前页面打开
5. window.location.href = externalLink

复制代码

通过window.location.search可以获取携带的参数。
二、第二种方式newUrl.searchParams

1. const newUrl = new URL('http://127.0.0.1:5173');
2. newUrl.searchParams.set('token', encodeURIComponent(token)); // 将token作为查询参数添加到URL
3. window.open(newUrl.href, '_blank'); // 在新页面打开链接

复制代码

通过new URLSearchParams(window.location.search)获取携带的参数；
第一种和第二种传参的方式会在地点栏暴露token,可以利用第三种方式，window.name来隐式传递了,接收页通过window.name获取token

1. const newUrl = new URL('http://127.0.0.1:5173');
2. window.open(newUrl, token);

复制代码