如何检测用户关闭浏览器/标签页或跳转至其他站点并在Next.js中实现会话处理

核心是通过浏览器beforeunload事件拦截页面卸载行为，区分「关闭标签/浏览器」和「跳转外部站点」两种场景，再决定是否销毁会话：

• 会话优先存储在HttpOnly类型的Cookie中，避免前端XSS风险
• 全局拦截所有跳转行为，跳转外部站点时打标记
• 页面卸载时判断标记，非外部跳转场景触发会话销毁接口

1. 客户端全局事件监听（App Router 示例） #

在根布局组件中添加客户端逻辑，拦截跳转和页面卸载事件：

'use client'
import { useEffect } from 'react'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    // 标记是否为外部站点跳转
    let isJumpExternal = false

    // 拦截a标签点击，判断是否跳外部站
    const handleLinkClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement
      const link = target.closest('a')
      if (link?.href) {
        const url = new URL(link.href)
        if (url.origin !== window.location.origin) {
          isJumpExternal = true
        }
      }
    }

    // 拦截JS触发的assign跳转
    const originalAssign = window.location.assign
    window.location.assign = (url: string | URL) => {
      const targetUrl = new URL(url.toString(), window.location.origin)
      if (targetUrl.origin !== window.location.origin) isJumpExternal = true
      return originalAssign.call(window.location, url)
    }

    // 拦截JS触发的replace跳转
    const originalReplace = window.location.replace
    window.location.replace = (url: string | URL) => {
      const targetUrl = new URL(url.toString(), window.location.origin)
      if (targetUrl.origin !== window.location.origin) isJumpExternal = true
      return originalReplace.call(window.location, url)
    }

    // 页面卸载前判断是否销毁会话
    const handleBeforeUnload = () => {
      // 排除刷新场景，如需刷新时销毁会话可删除此段判断
      const navEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming
      if (navEntry?.type === 'reload') return

      // 非外部跳转场景，发送请求销毁会话
      if (!isJumpExternal) {
        // 用sendBeacon保证卸载时请求不会被浏览器中断
        navigator.sendBeacon('/api/destroy-session')
      }
    }

    window.addEventListener('click', handleLinkClick)
    window.addEventListener('beforeunload', handleBeforeUnload)

    return () => {
      window.removeEventListener('click', handleLinkClick)
      window.removeEventListener('beforeunload', handleBeforeUnload)
      // 恢复原生跳转方法
      window.location.assign = originalAssign
      window.location.replace = originalReplace
    }
  }, [])

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  )
}

如果使用Pages Router，将上述useEffect逻辑放到_app.tsx中即可。

2. 服务端会话销毁接口 #

新建app/api/destroy-session/route.ts接口，实现会话销毁逻辑：

import { NextResponse } from 'next/server'
import { cookies } from 'next/headers'

export async function POST() {
  // 清空所有会话相关Cookie，如session_id等
  cookies().delete('session_id')
  // 如使用第三方会话管理工具，此处调用对应销毁方法
  return NextResponse.json({ success: true })
}

• 不要使用普通fetch/axios发送销毁请求，页面卸载时异步请求大概率会被浏览器中断，必须使用navigator.sendBeacon
• 存在极小概率异常场景：浏览器崩溃、强制结束进程时beforeunload不会触发，会话无法及时销毁，属于浏览器层面限制，无通用解决方案
• 站点如有iframe嵌入场景，需额外处理iframe内的跳转逻辑，避免误判

内容的提问来源于stack exchange，提问作者Usama Tahir