如何在 Next.js 中检测用户是否从外部链接返回-js教程-PHP中文网

如何在 Next.js 中检测用户是否从外部链接返回

本文介绍一种基于 sessionstorage 的轻量级方案，用于在 next.js 页面中判断用户是否通过浏览器“后退”操作从已跳转的外部链接返回，从而避免重复重定向。

本文介绍一种基于 sessionstorage 的轻量级方案，用于在 next.js 页面中判断用户是否通过浏览器“后退”操作从已跳转的外部链接返回，从而避免重复重定向。

在 Next.js 应用中，当使用 router.push() 跳转至外部 URL（如支付网关、第三方授权页）后，用户若点击浏览器「返回」按钮，会重新加载当前页面（即跳转前的 Next.js 页面）。此时若逻辑未加区分，可能再次触发重定向，导致无限循环或用户体验异常——例如重复跳转至同一支付页，或触发无效的 API 请求。

为精准识别该场景，推荐采用 客户端状态标记 + 会话级存储 方案：利用 sessionStorage 在跳转前设置唯一标识，在页面重载时读取该标识，即可可靠判断用户来源。

✅ 推荐实现方式（React Hook + Next.js Router）

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function RedirectGuardPage() {
  const router = useRouter();
  const [found, setFound] = useState(false);

  useEffect(() => {
    if (typeof window === 'undefined' || !router.isReady) return;

    // 检查是否已执行过跳转（即用户正从外部页返回）
    const redirectedFlag = sessionStorage.getItem('redirectedFlag');

    if (redirectedFlag === 'true') {
      console.log('[Redirect Guard] User returned from external site — skipping redirect');
      return;
    }

    // 仅首次访问时获取目标链接并跳转
    const { id, price } = router.query;
    if (!id || !price) return;

    getLinkAddress({ id: String(id), price: String(price) })
      .then((response) => {
        if (response.link_address) {
          setFound(true);
          // 标记已跳转，确保后续返回不重复执行
          sessionStorage.setItem('redirectedFlag', 'true');
          router.push(response.link_address).catch(console.error);
        } else {
          setFound(false);
          // 无有效链接时，3秒后自动后退
          const timer = setTimeout(() => {
            router.back();
          }, 3000);
          return () => clearTimeout(timer);
        }
      })
      .catch((err) => {
        console.error('Failed to fetch redirect URL:', err);
        router.back();
      });
  }, [router.isReady, router.query]);

  return (
    <div>
      {found ? (
        <p>正在跳转至外部服务…</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8483" title="dmap-jsapi-skill"><img
														src="https://img.php.cn/upload/skill/000/000/081/179206214475645.jpg" alt="dmap-jsapi-skill" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill8483" title="dmap-jsapi-skill" class="overflowclass">dmap-jsapi-skill</a>
													<p class="overflowclass">DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill8483" title="dmap-jsapi-skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      ) : (
        <p>正在准备跳转，请稍候…</p>
      )}
    </div>
  );
}

⚠️ 关键注意事项

sessionStorage 的作用域与生命周期：它仅在当前浏览器标签页内有效，关闭标签页后自动清除，天然适配「单次跳转 → 返回」流程，无需手动清理。
不可依赖 document.referrer：跨域外部站点会清空或伪造 referrer，且 Next.js SSR 环境下 window 未定义，该属性不可靠。
避免 SSR 报错：所有涉及 window 或 sessionStorage 的逻辑必须包裹在 typeof window !== 'undefined' 判断中。
错误兜底：务必为 router.push() 和异步请求添加 .catch() 或 try/catch，防止因网络或目标地址异常导致白屏。
SEO 与可访问性提示：若该页面对搜索引擎可见，建议添加，避免被误抓取。

✅ 替代思路对比（不推荐但需了解）

方案	可靠性	缺陷
document.referrer	❌ 低	外部站通常屏蔽 referrer；SSR 不可用；隐私模式下为空
history.state	⚠️ 中	需手动 pushState 注入标记，跳转外部链接时 state 会被丢弃
Cookie（带 SameSite=Lax）	⚠️ 中	涉及服务端协作，增加复杂度；非必要不引入