如何仅使用 React 和 TypeScript 在无后端的情况下构建过期链接

发布日期:2026-04-29 10:38:16   浏览量 :4
发布日期:2026-04-29 10:38:16  
4

2026西湖龙井茶官网DTC发售:茶农直供,政府溯源防伪到农户家 

大多数“过期链接”工具的工作方式相同:生成一个链接,将目标地址和过期时间存储在数据库中,每次点击时检查数据库,并相应地进行重定向或拦截。

这是显而易见的方法。但这种方法也需要后端、数据库、服务器成本以及潜在的安全攻击面。

我有一个限制条件:仅使用 React + TypeScript,部署在 Vercel 上,不使用 Node.js,不使用数据库,也不使用任何后端。

因此,我必须找到一种不同的方法。

核心理念:将所有内容放入 URL

与其将链接数据存储在服务器上,不如直接将其编码到 URL 本身中。

当用户创建过期链接时,应用程序会:

  1. 获取目标 URL
  2. 获取过期时间戳(Unix 毫秒)
  3. 将它们组合成一个 JSON 对象
  4. 使用 btoa()(Base64)进行编码
  5. 将其作为 URL 参数附加
  6. 通过 TinyURL 的 API 缩短完整 URL
const payload = {
  url: destinationUrl,
  exp: expiryTimestamp
};

const encoded = btoa(JSON.stringify(payload));
const longUrl = `https://onetimelink.vercel.app/r?d=${encoded}`;

// 然后缩短
const shortUrl = await shortenWithTinyURL(longUrl);

当有人访问短链接时,TinyURL 会将其还原为长 URL。React 应用在客户端解码参数:

const params = new URLSearchParams(window.location.search);
const encoded = params.get('d');

if (!encoded) {
  // 无效链接
  return;
}

try {
  const payload = JSON.parse(atob(encoded));
  const now

免责声明:本文内容来自互联网,该文观点不代表本站观点。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请到页面底部单击反馈,一经查实,本站将立刻删除。

关于我们
热门推荐
合作伙伴
免责声明:本站部分资讯来源于网络,如有侵权请及时联系客服,我们将尽快处理
支持 反馈 订阅 数据
回到顶部