Question

这里我想在关闭浏览器时注销用户。为此，我做了R＆amp; D，发现当我们关闭浏览器时会触发以下代码。

window.onbeforeunload = function() {
  myService.logout();
  return 'Your own message goes here...';
}

当我尝试关闭浏览器时，此事件将触发，它将使用户注销。但问题是当页面被重定向时，此事件也会被触发。

我想使用此功能让用户注销。但是它出错了。请帮我做这个功能。

Answer 1

但问题是当页面被重定向时，此事件也会被触发。

我想这是你自己正在执行的重定向。如果是这种情况，为什么不使用全局变量来将重定向与客户端的重定向区分开来？像这样：

...
thisismyredirect = true; //before redirecting, set this variable
window.location = "http://www.yoururl.com";
...

并在您的onbeforeunload事件中，检查是否由您执行了此重定向。如果是，则无需调用logout()函数：

window.onbeforeunload = function() {
    if(!thisismyredirect) {
        myService.logout();
        return 'Your own message goes here...';
    }
}

Answer 2

另一种解决方案是使用Window.sessionStorage。用户登录时，将 sessionStorage 变量设置为'true'，当用户注销时，将其设置为'false'，该变量将从 sessionStorage 中删除。当浏览器关闭时。如果您需要在同一个浏览器实例中的各个标签之间共享sessionStorage变量，请发布一个很好的示例here

Answer 3

tabOrBrowserStillAliveInterval;

constructor() {
  // system should logout if the browser or last opened tab was closed (in 15sec after closing)
  if (this.wasBrowserOrTabClosedAfterSignin()) {
    this.logOut();
  }

  // every 15sec update browserOrTabActiveTimestamp property with new timestamp
  this.setBrowserOrTabActiveTimestamp(new Date());
  this.tabOrBrowserStillAliveInterval = setInterval(() => {
    this.setBrowserOrTabActiveTimestamp(new Date());
  }, 15000);
}

signin() {
  // ...
  this.setBrowserOrTabActiveTimestamp(new Date());
}

setBrowserOrTabActiveTimestamp(timeStamp: Date) {
  localStorage.setItem(
    'browserOrTabActiveSessionTimestamp',
    `${timeStamp.getTime()}`
  );
}

wasBrowserOrTabClosedAfterSignin(): boolean {
  const value = localStorage.getItem('browserOrTabActiveSessionTimestamp');

  const lastTrackedTimeStampWhenAppWasAlive = value
    ? new Date(Number(value))
    : null;
  const currentTimestamp = new Date();
  const differenceInSec = moment(currentTimestamp).diff(
    moment(lastTrackedTimeStampWhenAppWasAlive),
    'seconds'
  );

  // if difference between current timestamp and last tracked timestamp when app was alive
  // is more than 15sec (if user close browser or all opened *your app* tabs more than 15sec ago)
  return !!lastTrackedTimeStampWhenAppWasAlive && differenceInSec > 15;
}

工作原理：如果用户关闭浏览器或关闭所有打开的您的应用标签，则在 15 秒超时后 - 将触发注销。

它适用于打开多个窗口
没有额外的服务器负载
F5 / 刷新没问题

浏览器限制是我们在注销前需要 15 秒超时的原因。由于浏览器无法区分以下情况：浏览器关闭、选项卡关闭和选项卡刷新。所有这些操作都被浏览器视为相同的操作。因此，15 秒超时就像一种解决方法，仅捕获浏览器关闭或关闭所有打开的您的应用 选项卡（并跳过刷新/F5）。

如何在浏览器关闭时注销用户

3 个答案: