如何处理不活跃的用户并在 React JavaScript 中将他们注销？

Question

我在一个包含重要数据的私人网站上工作，我想注销任何 10 分钟内没有做任何事情的用户（例如忘记在后台打开的选项卡）。我该怎么做，只是运行使用计时器监听鼠标点击的事件监听器就可以了，还是有其他更好的解决方案？

Answer 1

鼠标移动（不是点击）的事件监听器和键盘点击的事件监听器也应该完成这项工作。

假设您想在 activity 10 分钟后注销用户。只需在用户登录时启动一个计时器（10 分钟），每次用户移动鼠标或单击键盘时，使用事件侦听器重置计时器。如果没有 activity，10 分钟后，计时器应执行注销功能。

更新：

就像 Vishnu Bhadoriya 建议的情况，在那种情况下，闲置的解决方案应该是实现心跳 b/w 客户端和服务器。现在，在这种情况下，您的鼠标和键盘侦听器将向服务器发送生命线事件，并且服务器将保持其会话处于活动状态。当服务器超过 10 分钟（activity 的阈值）未收到生命线事件时，服务器可以向客户端发出一个事件，该事件可以将其注销或可以简单地使客户端的身份验证令牌无效

Answer 2

这只能通过 JavaScript 来实现。由于我们的网络应用程序可以在多个选项卡中打开，因此最好将用户的最后 activity 存储在 localStorage

中

首先让我们声明我们认为是用户 activity 的事件，并将用户 activity 的时间存储在 localStorage

中

document.addEventListener("mousemove", () =>{ 
  localStorage.setItem('lastActvity', new Date())
});
document.addEventListener("click", () =>{ 
  localStorage.setItem('lastActvity', new Date())
});

接下来让我们创建将在每个给定时间间隔检查的时间间隔。

let timeInterval = setInterval(() => {
  let lastAcivity = localStorage.getItem('lastActvity')
  var diffMs = Math.abs(new Date(lastAcivity) - new Date()); // milliseconds between now & last activity
  var seconds = Math.floor((diffMs/1000));
  var minute = Math.floor((seconds/60));
  console.log(seconds +' sec and '+minute+' min since last activity')
  if(minute == 10){
    console.log('No activity from last 10 minutes... Logging Out')
    clearInterval(timeInterval)
    //code for logout or anything...
  }

},1000)

如何处理不活跃的用户并在 React JavaScript 中将他们注销？

How to handle inactive users and log them out in react JavaScript?

javascript

reactjs

security

logout

更新：