React中在beforeunload事件调用API及实现自定义卸载弹窗的问题

嘿，我来帮你搞定React里beforeunload事件的这两个头疼问题——调用API和自定义弹窗，这玩意儿浏览器的限制确实挺多的，我给你捋清楚👇

一、自定义卸载弹窗的行为不一致问题 #

首先得给你说个扎心的事实：现在主流浏览器（Chrome、Firefox、Edge这些）早就不支持自定义beforeunload弹窗的提示文本了！不管你给e.returnValue设置什么内容，浏览器都会显示它自己默认的提示框（比如“你确定要离开此页面吗？”这类）。你之前写的e.preventDefault(); e.returnValue = '';，可能在某些老浏览器还能生效，但新浏览器直接忽略自定义文本，这就是你觉得行为不一致的根源。

正确的做法是：只在有需要提示的场景下（比如用户有未保存的修改）才触发这个逻辑，代码可以调整成这样：

import { useEffect, useState } from 'react';

function YourComponent() {
  // 用状态标记是否有未保存的修改
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);

  useEffect(() => {
    const handleBeforeUnload = (e) => {
      // 只有当有未保存修改时，才触发弹窗提示
      if (hasUnsavedChanges) {
        e.preventDefault();
        // 这里的文本浏览器会忽略，但必须设置这个值才能触发默认弹窗
        e.returnValue = '';
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    // 组件卸载时移除监听
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [hasUnsavedChanges]); // 依赖状态变化，实时更新监听逻辑

  // 其他业务逻辑，比如用户编辑内容时设置hasUnsavedChanges为true
  return (
    // 你的组件内容
  );
}

二、beforeunload中调用API的可行方案 #

beforeunload触发时页面马上要卸载，普通的AJAX请求很容易被浏览器取消，得用能保证请求完成的方式，针对你遇到的fetch keepalive和sendBeacon的问题，给你两个靠谱的方案：

方案1：fetch + keepalive: true（推荐） #

这个方法支持自定义请求头（包括授权头），只要请求体大小控制在64KB以内（浏览器的限制），就能稳定触发。示例代码：

const unlockUser = async () => {
  try {
    await fetch('/api/unlock-user', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${yourAuthToken}` // 正常带授权头没问题
      },
      body: JSON.stringify({ userId: currentUserId }),
      keepalive: true // 关键：告诉浏览器要保持连接直到请求完成
    });
  } catch (err) {
    console.error('解锁请求失败:', err);
  }
};

useEffect(() => {
  const handleBeforeUnload = (e) => {
    if (hasUnsavedChanges) {
      e.preventDefault();
      e.returnValue = '';
      // 调用解锁API
      unlockUser();
    }
  };

  window.addEventListener('beforeunload', handleBeforeUnload);
  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, [hasUnsavedChanges, currentUserId, yourAuthToken]);

方案2：sendBeacon + URL参数传授权信息（妥协方案） #

如果你的后端允许把授权token放在URL的查询参数里，可以用这个方法，但要注意安全——URL参数可能会被记录在服务器日志里，敏感场景不推荐：

const unlockUser = () => {
  const formData = new FormData();
  formData.append('userId', currentUserId);
  // 把授权token放在URL参数里
  navigator.sendBeacon(`/api/unlock-user?token=${yourAuthToken}`, formData);
};

额外优化：结合visibilitychange事件 #

有时候beforeunload触发时机太靠后，请求容易被中断，你可以监听visibilitychange事件，当页面变成隐藏状态（比如用户切标签页、最小化窗口）时就提前调用API，这样更稳妥：

useEffect(() => {
  const handleVisibilityChange = () => {
    // 页面隐藏时提前调用API
    if (document.visibilityState === 'hidden' && hasUnsavedChanges) {
      unlockUser();
    }
  };

  const handleBeforeUnload = (e) => {
    if (hasUnsavedChanges) {
      e.preventDefault();
      e.returnValue = '';
    }
  };

  window.addEventListener('visibilitychange', handleVisibilityChange);
  window.addEventListener('beforeunload', handleBeforeUnload);

  return () => {
    window.removeEventListener('visibilitychange', handleVisibilityChange);
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, [hasUnsavedChanges, unlockUser]);

三、一些额外的注意事项 #

• 不管用哪种方法，都不能保证100%的请求成功率——如果用户强制关闭浏览器，浏览器会直接终止所有请求，所以别把这个逻辑当成关键业务的唯一依赖（比如解锁操作，最好加个兜底的定时检查）。
• 别在beforeunload里做复杂操作，浏览器给这个事件的执行时间非常有限，复杂逻辑大概率会被中断。

内容来源于stack exchange