Angular使用pagehide事件区分浏览器关闭与刷新避免刷新触发SSO登出

现有实现问题 #

• 你当前代码中window.event.returnValue赋值、返回提示文本的逻辑仅在beforeunload事件中生效，pagehide事件不支持阻止页面卸载，也无法触发浏览器的离开确认弹窗，这部分逻辑目前是无效的。
• 页面卸载过程中普通的同步/异步AJAX请求会被浏览器主动终止，登出请求需要改用navigator.sendBeacon发送，浏览器会保证这类请求在后台完成发送，不会被中断。

可以继续使用pagehide事件，通过存储标记区分刷新/关闭场景 #

浏览器没有提供原生API可以100%准确区分「刷新页面」和「关闭标签/浏览器」，但可以结合Web Storage的特性实现准确率极高的判断，核心逻辑依赖：

• SessionStorage仅在同标签页的同一会话下保留，刷新页面时数据保留，关闭标签/浏览器时自动销毁
• localStorage是跨会话持久化存储，可用来做临时状态标记

具体实现逻辑：

1. 初始化页面时如果检测到是刷新触发的加载，直接清除临时登出标记，保留用户登录状态
2. pagehide事件触发时写入临时登出标记，用sendBeacon发送登出请求
3. 若为刷新场景，新页面加载后会自动清除登出标记，同时可调用SSO会话续期接口恢复登录状态，不会影响用户使用

修改后代码示例 #

import { fromEvent } from 'rxjs';

export class HomepageComponent implements OnInit {

  ngOnInit(): void {
    // 页面加载时判断是否为刷新场景
    const pendingLogoutTs = localStorage.getItem('pending_logout_ts');
    if (pendingLogoutTs && Date.now() - Number(pendingLogoutTs) < 3000) {
      // 3秒内的待登出标记为刷新触发，直接清除，可补充调用SSO会话续期接口恢复登录
      localStorage.removeItem('pending_logout_ts');
    }
    this.subscribeToNativeNavigation();
  }
  
  private subscribeToNativeNavigation() {
    // 关闭/刷新前的确认提示逻辑挪到beforeunload事件中实现
    fromEvent(window, "beforeunload").subscribe((e: BeforeUnloadEvent) => {
      const message = "You may lose your data if you refresh now";
      e.preventDefault();
      e.returnValue = message;
      return message;
    });

    fromEvent(window, "pagehide").subscribe(() => {
      // 写入临时待登出标记，3秒自动过期
      localStorage.setItem('pending_logout_ts', String(Date.now()));
      
      // 调用sendBeacon发送SSO登出请求，不会被浏览器中断
      const ssoLogoutUrl = '你的组织SSO登出接口地址';
      const logoutParams = new FormData();
      logoutParams.append('user_token', sessionStorage.getItem('user_token') || '');
      navigator.sendBeacon(ssoLogoutUrl, logoutParams);
      
      // 执行本地存储清理逻辑
      sessionStorage.clear();
    });
  }
}

可选优化方案 #

如果你的应用不需要在关闭标签时立刻销毁SSO服务端会话，也可以直接把用户登录凭证存在SessionStorage中：

• 刷新页面时SessionStorage保留，用户仍然处于登录状态
• 关闭标签/浏览器时SessionStorage自动清空，用户再次打开应用时无凭证，会自动跳转到SSO登录页，不需要主动调用登出接口，实现更简单，兼容性也更好。

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