如何在浏览器或标签页关闭时销毁Vaadin 8会话？

好问题！你遇到的痛点很典型——onbeforeunload会在刷新、导航、关闭等多种场景触发，我们需要额外逻辑来区分真正的页面关闭和其他操作，同时还要适配移动设备的特殊行为。下面是一步步的解决方案：

核心思路：区分页面关闭与刷新 #

要实现精准触发，我们需要结合两个事件：

• beforeunload：在页面即将卸载前触发，先判断当前操作是否是刷新
• unload/pagehide：在页面实际卸载时，根据之前的判断结果决定是否销毁会话

具体实现代码（Vaadin整合） #

1. 前端JavaScript逻辑 #

我们用performance API来判断是否是刷新操作，同时兼容移动设备的pagehide事件（比unload更可靠）：

let isRefreshing = false;

// 监听页面即将卸载的事件，标记是否为刷新操作
window.addEventListener('beforeunload', function() {
  // 获取导航记录，判断是否是刷新
  const navigationEntry = performance.getEntriesByType('navigation')[0];
  isRefreshing = navigationEntry?.type === 'reload';
});

// 统一处理页面卸载/隐藏的逻辑
function handleSessionCleanup() {
  if (!isRefreshing) {
    // 调用Vaadin后端的销毁会话方法
    $0.closeMyApplication();
  }
}

// 绑定事件：覆盖桌面和移动场景
window.addEventListener('unload', handleSessionCleanup);
window.addEventListener('pagehide', handleSessionCleanup);

这里的$0是Vaadin自动暴露的当前视图实例，能直接调用后端标注了@ClientCallable的方法，无需额外配置。

2. Vaadin后端回调实现 #

在你的Vaadin视图类中添加客户端可调用的方法，用来销毁会话：

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.page.Page;
import com.vaadin.flow.server.VaadinSession;
import com.vaadin.flow.shared.ui.ClientCallable;

public class YourMainView extends VerticalLayout {

    public YourMainView() {
        // 注册前端脚本到页面
        Page.getCurrent().getJavaScript().execute("""
            let isRefreshing = false;
            window.addEventListener('beforeunload', function() {
              const navigationEntry = performance.getEntriesByType('navigation')[0];
              isRefreshing = navigationEntry?.type === 'reload';
            });
            function handleSessionCleanup() {
              if (!isRefreshing) {
                $0.closeMyApplication();
              }
            }
            window.addEventListener('unload', handleSessionCleanup);
            window.addEventListener('pagehide', handleSessionCleanup);
        """);
    }

    @ClientCallable
    public void closeMyApplication() {
        // 销毁当前Vaadin会话
        VaadinSession.getCurrent().close();
        // 可选：重定向到退出页面或首页
        UI.getCurrent().getPage().setLocation("/logout");
    }
}

移动设备适配要点 #

移动设备上的页面卸载场景更复杂（比如切换应用、按返回键、关闭标签），pagehide事件比unload更可靠——像iOS Safari这类浏览器在后台时可能不会触发unload，但会稳定触发pagehide。同时绑定两个事件，就能覆盖绝大多数移动场景。

额外注意事项 #

• 部分浏览器会限制unload/pagehide中的异步操作，Vaadin的RPC调用是同步的，刚好适配这个限制。
• 如果用户打开多个标签页，销毁会话会影响所有同会话的标签页，这是会话的正常行为；如果需要更细粒度控制，可以结合sessionStorage做标签页独立标记。

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