返回

后端优雅处理浏览器关闭实现用户自动登出

前端

浏览器关闭后清除令牌的最佳方法

前言

用户登出是 Web 应用程序安全性的重要功能。传统方法要求用户手动单击“登出”按钮，但这可能会很麻烦且容易忘记。随着浏览器技术的发展，我们现在可以利用浏览器事件来自动检测用户何时关闭浏览器。这让我们能够在浏览器关闭时自动清除后端的令牌，从而实现无缝的登出体验。

技术实现

有多种技术可以用于在浏览器关闭后清除令牌：

  • AJAX 请求： 异步 JavaScript 和 XML（AJAX）是一种技术，允许前端与后端进行异步通信。当浏览器检测到“beforeunload”事件时，我们可以触发一个 AJAX 请求，向后端发送一条消息，表明用户正在关闭浏览器。后端收到消息后，可以立即清除用户的令牌，从而使他们登出。
window.addEventListener("beforeunload", function(e) {
  // 发送 AJAX 请求到后端以清除令牌
  fetch("/logout", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      token: localStorage.getItem("token"),
    }),
  });
});
  • WebSocket： WebSocket 是一种双向通信技术，非常适合实时应用程序。我们可以建立一个 WebSocket 连接，允许前端和后端之间持续通信。当浏览器检测到“beforeunload”事件时，我们可以通过 WebSocket 发送一条消息，通知后端用户正在关闭浏览器。后端收到消息后，可以清除用户的令牌。
const socket = new WebSocket("wss://example.com/logout");
socket.addEventListener("open", function() {
  socket.send(JSON.stringify({
    token: localStorage.getItem("token"),
  }));
});
  • 事件监听器： 我们可以使用事件监听器来侦听浏览器关闭事件，例如“beforeunload”或“unload”。当检测到这些事件时，我们可以执行一个函数来清除用户的令牌。与 AJAX 请求相比，这种方法的缺点是它只在页面卸载时触发，因此如果用户刷新页面，则不会触发。
window.addEventListener("beforeunload", function(e) {
  // 清除用户的令牌
  localStorage.removeItem("token");
});
  • 心跳机制： 心跳机制是一种定期向服务器发送请求以检查用户活动的技术。我们可以利用心跳机制来检测用户何时离开。后端可以设置一个定时器，定期向客户端发送请求。如果客户端没有在指定的时间内做出响应，则后端可以认为用户已关闭浏览器并清除他们的令牌。
setInterval(function() {
  // 向后端发送心跳请求
  fetch("/heartbeat", {
    method: "GET",
  });
}, 1000);

选择最佳方法

选择最适合您应用程序的最佳方法取决于您的特定要求。以下是一些需要考虑的因素：

  • 实时性： 如果需要在用户关闭浏览器后立即清除令牌，则 WebSocket 或 AJAX 请求是更好的选择。
  • 可靠性： WebSocket 处理断开连接情况的能力使其成为需要高可靠性的应用程序的更可靠选择。
  • 简单性： 事件监听器是实现起来最简单的，但它只在页面卸载时触发。

结论

通过利用浏览器事件和后端处理，我们可以优雅地处理浏览器关闭事件，并确保用户在关闭浏览器时自动登出。本文介绍的各种技术提供了不同的权衡，从实时性到可靠性，您可以根据自己的应用程序需求选择最适合的技术。通过实现自动登出，我们可以提高用户隐私并防止未经授权的访问。

常见问题解答

  1. 我可以使用 cookie 而不是令牌吗？

不建议使用 cookie 作为身份验证机制，因为它们容易受到跨站点脚本（XSS）攻击。令牌是更安全的替代方案，因为它们不会存储在浏览器的 cookie 中。

  1. 后端如何清除令牌？

后端需要实现一个注销端点，用户可以在其中发送其令牌。端点应验证令牌，然后从数据库中删除相应的用户会话。

  1. 如果用户重新打开浏览器会发生什么？

如果用户重新打开浏览器，则需要重新登录，因为他们的令牌已被清除。

  1. 我可以使用心跳机制来检测用户何时处于非活动状态吗？

是的，心跳机制可以用来检测用户何时处于非活动状态。如果您检测到用户已处于非活动状态一段时间，则可以向他们发送通知或注销他们。

  1. 使用事件监听器有什么缺点？

事件监听器只在页面卸载时触发，因此如果用户刷新页面，则不会触发。另外，事件监听器不处理断开连接情况，因此如果用户意外关闭浏览器，则无法触发注销。