仅在浏览器关闭而不是刷新时注销用户

Question

当用户关闭浏览器而不是刷新时注销用户。我使用这个，它有效，但用户也会在刷新浏览器时注销

@HostListener('window:unload', ['$event'])
unloadHandler($event) {
  this.LogOutByTabClose();
}

@HostListener('window:beforeunload', ['$event'])
public beforeunloadHandler($event) {
  var msg = this.messageBundle['windowClosemsg']
  $event.returnValue = msg;
  return false
}

LogOutByTabClose() {
  this.LoginService.LogOut(UserService.UserId, UserService.DisplayName, UserService.Apptype).subscribe();
  localStorage.clear();
}

Answer 1

一个很好的解决方案是使用 Window.sessionStorage。当用户登录时，您将 sessionStorage 变量设置为“true”，当用户注销时，您将其设置为“false”，当浏览器关闭时，该变量将从 sessionStorage 中删除。

Answer 2

我尝试了多种解决方案，例如“

unload

”，“

onbeforeunload

”，“

performance.getEntriesByType("navigation")[0]

”，但没有任何效果对我来说。

我正在多页网络应用程序上尝试它。 下面提到了有效的方法：

在要注销的页面设置本地存储变量。

localStorage.setItem('isReloaded', true);

现在，在您的主页上

componentDidMount(){
if(localStorage.getItem('isReloaded') != null){
  this.logout(); //logout function
}

并且，内部注销功能重置本地存储值

logout(){
 //your logout code
 localStorage.removeItem('isReloaded')
}

这对我来说非常有效；

Answer 3

如果有人仍在寻找解决方案。 在 VUE JS 中，我正在探索生命周期挂钩并获得了 onBeforeUpdate 和 onBeforeUnmount。

我所做的和对我有用的。在应用程序布局组件/应用程序构建器中，我包含了 onBeforeUpdate ，它在登录后调用。 所以我检查了 Performance.navigation.type* 并得到 1 - 重新加载，因此，在重新加载时，只需返回，但如果没有，用户应该再次登录（我的应用程序业务规则）；

*更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation/type

onBeforeUpdate(() => {
  if (performance.navigation.type == 1) {
    return false;
  }
  destroyCache();
  authService.logout();
  window.location.reload();
});