浏览器关闭时发送请求使token过期的方法，不受刷新和关闭标签页影响？

Question

监听浏览器关闭时需要【发送请求给后端】清除token，不受刷新和关闭标签页影响，有人搞过吗？

给了其它方案给设计师，但他们安全那边就是要关闭浏览器时就得发送请求给后端使token过期

Answer 1

做过这个功能，但只适合主流浏览器，代码如下：

 let beforeUnloadTime = null;
 window.addEventListener("beforeunload", e => beforeunloadHandler(e));
 window.addEventListener("unload", e => unloadHandler(e))

 function beforeunloadHandler () {
    beforeUnloadTime = new Date().getTime();
 }

 function unloadHandler(e) {
  let unloadTime = new Date().getTime() - beforeUnloadTime;
  // 判断是窗口关闭还是刷新
  if (unloadTime <= 5) {
    await fetch(``, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Edc-Authorization":
          "Bearer " + localStorage.getItem("Token")
      },
      // 保持连接
      keepalive: true
    });
  }
 }

如果想更好的解决这个问题，建议使用socket做心跳连接，一直ping，如何断开连接，表示浏览器关闭了，这时候后端处理这个逻辑。

问题：有没有可能同一个浏览器打开了多个页面，我只关闭了其中一个页面，但是我切换了另外一个页面时，并不想退出登录，那么我们应该在这个浏览器关闭这个域名的最后一个网页时处理这个逻辑。

所以我们应该记住当前浏览器打开几个页面：

window.onload = function() {
    const count = localStorage.getItem("BrowserWindowNumber");
    if (count === null) {
      localStorage.setItem("BrowserWindowNumber", 1);
    } else if (~~count === -1) {
      localStorage.setItem("BrowserWindowNumber", 1);
    } else {
      localStorage.setItem("BrowserWindowNumber", parseInt(count) + 1);
    }
  };

  // 当窗口关闭时，减少计数器
  window.onunload = function() {
    const count = localStorage.getItem("BrowserWindowNumber");
    if (count !== null) {
      localStorage.setItem("BrowserWindowNumber", parseInt(count) - 1);
    }
  };



function beforeunloadHandler () {
    beforeUnloadTime = new Date().getTime();
 }

 function unloadHandler(e) {
  let unloadTime = new Date().getTime() - beforeUnloadTime;
  // 判断是窗口关闭还是刷新
  if (unloadTime <= 5) {
    const count = localStorage.getItem("BrowserWindowNumber");
    if(~~count === 0) {
        await fetch(``, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Edc-Authorization":
            "Bearer " + localStorage.getItem("Token")
        },
        // 保持连接
        keepalive: true
      });
    }
  }
 }

Answer 2

Beacon API 用于发送异步和非阻塞的信标请求。信标请求不需要响应，且浏览器保证在页面卸载前初始化并运行完成。

或者每隔一段时间（如一分钟）发送一次请求，当后端超过一端时间没有收到请求时就认为 token 过期。

Answer 3

做不到，至少公域浏览器做不到。如果你们是内部需求，可以搞一些奇奇怪怪的方案，否则的话就很难。

哦，我想到一个方案，用 service worker 的 notification API，跟服务器做心跳，断了就过期 token。

Answer 4

这个做过类似的，但是我只做了Chrome浏览器，我当时做的时候关闭浏览器的时候清除本地的localStorage，然后使用onbeforeunload去做的话，无法实现，看到一篇文章中说浏览器刷新和关闭的时候load事件会有时间差的存在，于是我采用了这样的办法。但是记住我只测试了Chrome浏览器，而且这种方式不知道适不适合你们那么严格的要求。代码如下：

// 判断是刷新还是关闭浏览器，刷新不删除localStorage，否则删除
onMounted(() => {
  let beforeTime = 0,
    leaveTime = 0;
  window.onunload = () => {
    leaveTime = new Date().getTime() - beforeTime;
    if (leaveTime <= 5) {
      console.log("====关闭=====");
      localStorage.clear();
    } else {
      console.log("====刷新=====");
    }
  };

  window.onbeforeunload = () => {
    beforeTime = new Date().getTime();
  };
});

Answer 5

今天回答了一个类似的问题你可以参考一下 怎么在页面刷新/关闭之前发送个请求, 且不想要提示框 ?
但是如果项目会打开多页签的，那么就不太适合这样的处理，会比较麻烦。其实把 token 间隔设置短一些，然后加上 refresh_token 其实就好了。

主要就是两个方案：

• 使用 Navigator.sendBeacon() 这个API;
• 或者使用Fetch发起请求时配置 keepalive 属性。

Answer 6

使用Beacon结合visibilitychange事件
很多统计用户页面停留时间就是这么干的
注意不要用 unload 或 beforeunload 事件

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", data);
  }
});

Answer 7

这个需求其实就是想让客户端浏览器主动通知服务器 token 需要过期，用浏览器关闭的方式还是有很多方式可以绕开的：断网、关机都不会触发浏览器的关闭事件。如果非要按照这个需求去处理，你还不如结合 websocket 用长连接方式，断开连接后服务端就把对应连接关联的 token 给过期掉，这种可能更靠谱点（当然也会有其他问题，看取舍了）。