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

Question

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

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

Answer 1

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

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

Answer 2

要在浏览器关闭时发送请求使token过期，并且不受刷新和关闭标签页的影响，你可以使用beforeunload事件。这个事件会在窗口、文档及其资源将要卸载时触发。你可以在这个事件的处理函数中发送一个请求到后端来使token过期。

下面是一个简单的示例代码，演示了如何使用beforeunload事件来发送请求使token过期：

window.addEventListener('beforeunload', function (e) {  // 在这里发送请求到后端使token过期  // 你可以使用fetch、axios或其他你喜欢的HTTP库来发送请求  fetch('/api/token/expire', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    body: JSON.stringify({ token: 'your_token_here' }), // 将要过期的token作为请求体发送  })    .then(response => {      // 处理响应，如果需要的话    })    .catch(error => {      // 处理错误，如果需要的话    });  // Chrome要求返回一个非空字符串，否则不会触发事件  e.preventDefault();  e.returnValue = '';});

请注意，由于浏览器安全策略的限制，beforeunload事件的处理函数在大多数浏览器中是异步执行的，这意味着你不能在这个函数中等待异步操作（如HTTP请求）完成。因此，你可能需要采取其他策略来确保token在浏览器关闭之前被成功过期，例如使用WebSockets或其他长连接技术。

此外，还需要注意的是，即使你成功地在浏览器关闭时发送了使token过期的请求，仍然有可能存在一些边缘情况，例如用户直接关闭计算机或杀死浏览器进程，导致请求无法成功发送。因此，后端应该有一个机制来处理这种情况，例如设置一个token的过期时间，并在验证token时检查它是否已经过期。