Spring Boot：如何仅在浏览器/最后一个标签关闭时销毁会话

嘿，我来帮你搞定这个标签页关闭就误杀会话的问题！

你现在遇到的核心问题是：每个标签页的beforeunload事件都会触发/logout，导致只要关一个标签就把整个会话搞没了。咱们得通过前端跟踪标签页数量+区分刷新和关闭动作来精准控制，只在最后一个标签/浏览器关闭时才销毁会话。

一、先搞定标签页计数：用localStorage跨标签共享状态 #

咱们可以用localStorage来记录当前打开的标签页总数，只有当计数降到0的时候，才触发注销请求：

1. 页面加载时加计数
   在页面初始化的时候执行这段代码，每打开一个新标签，计数就加1：

   document.addEventListener('DOMContentLoaded', function() {
       let tabCount = parseInt(localStorage.getItem('tabCount')) || 0;
       localStorage.setItem('tabCount', tabCount + 1);
       
       // 监听其他标签页的计数变化，确保当前标签的计数是同步的
       window.addEventListener('storage', function(e) {
           if (e.key === 'tabCount') {
               // 这里不用手动改，localStorage会自动同步，只是留个钩子方便后续扩展
           }
       });
   });
   

2. 修改beforeunload事件：只在最后一个标签关闭时注销
   更新你原来的beforeunload逻辑，先把计数减1，只有减到0的时候才发注销请求：

   $(window).on('beforeunload', function() {
       let tabCount = parseInt(localStorage.getItem('tabCount')) - 1;
       localStorage.setItem('tabCount', tabCount);
       
       // 只剩最后一个标签了，才触发注销
       if (tabCount === 0) {
           // 这里要用同步AJAX，不然浏览器关闭时可能会取消异步请求
           $.ajax({
               url: "/logout",
               type: "GET",
               async: false
           });
       }
   });
   

二、区分页面刷新和浏览器关闭 #

上面的方案还有个小问题：如果只剩一个标签页，刷新页面的时候也会触发计数减到0，导致误注销。咱们加个定时器来规避这个情况：

let isRefreshing = false;

// 页面加载成功时，清除之前可能残留的定时器
window.addEventListener('load', function() {
    clearTimeout(window.logoutTimer);
    isRefreshing = false;
});

$(window).on('beforeunload', function() {
    let tabCount = parseInt(localStorage.getItem('tabCount')) - 1;
    localStorage.setItem('tabCount', tabCount);
    
    if (tabCount === 0) {
        isRefreshing = true;
        // 设置500毫秒的延迟，如果是刷新页面，load事件会马上清除这个定时器
        window.logoutTimer = setTimeout(function() {
            $.ajax({
                url: "/logout",
                type: "GET",
                async: false
            });
        }, 500);
    }
});

// 顺便监听页面可见性，切后台的时候也可以做些处理（可选）
document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        clearTimeout(window.logoutTimer);
    }
});

三、后端兜底，不怕前端出问题 #

就算前端的计数偶尔出错（比如浏览器崩溃导致localStorage没更新），你已经设置了30分钟的会话超时，过段时间会话也会自动失效，不会有残留的无效会话。

另外，你可以在后端的/logout接口加个日志，方便排查问题：

@GetMapping("/logout")
public String logout(HttpServletRequest request, HttpServletResponse response) {
    Authentication auth = SecurityContextHolder.getContext().getAuthentication();
    if (auth != null) {
        new SecurityContextLogoutHandler().logout(request, response, auth);
        log.info("用户 {} 的会话已注销", auth.getName());
    }
    return "redirect:/login";
}

最后验证下场景 #

• 关闭单个标签页：计数减1但不为0，会话保留，正常
• 关闭最后一个标签/整个浏览器：计数到0，触发注销，会话销毁
• 多标签页打开：每个标签加载时计数增加，关任意非最后标签，会话不受影响
• 页面刷新：定时器被load事件清除，不会误注销

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