如何在 React JavaScript 中处理不活动用户并将其注销？

Question

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

Answer 1

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

首先，让我们声明我们认为是用户活动的事件，并将用户活动的时间存储在 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)