【前端】实现系统1分钟没动（无任何操作）则自动退出登录功能

一、方案原理

可以借助 JavaScript 的 setTimeout 方法来实现该功能。同时为了避免用户在操作时倒计时被重新计算需要在页面上记录用户最后一次的操作时间。

二、解决方案

方案一 仅监测click动作

1、实现代码

// 定义最大的闲置时间例如为3分钟
const MAX_IDLE_TIME = 3 * 60 * 1000;

// 记录用户最后一次操作的时间
let lastActionTime = new Date();

// 定义一个函数用于每次用户有行为时更新最后操作时间
function updateLastActionTime() {
  lastActionTime = new Date();
}

// 定义一个计时器
let timeoutId = setTimeout(() => {
  console.log('用户已经很长时间没有操作了');
  // 在这里可以添加登出等处理逻辑
}, MAX_IDLE_TIME);

// 监听页面上任何一个元素的点击事件
document.addEventListener('click', () => {
  updateLastActionTime();
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    console.log('用户已经很长时间没有操作了');
    // 在这里可以添加登出等处理逻辑
  }, MAX_IDLE_TIME);
});

2、代码讲解

上述代码使用了 JavaScript 的 setTimeout 方法和 clearTimeout 方法来实现相应的计时器功能。如果用户在相应时间内的操作则会更新最后的操作时间并重新启动计时器。如果用户在相应的时间内没有操作则会执行相应的处理逻辑例如执行退出登录等操作。该实现方案简单易懂并且可以应用于多种不同的场景中。

方案二、监测多种事件

上面的代码只监听了 click 事件一些没有点击行为的情况是检测不到的。如果需要检测其他事件可以使用类似的方式监听其他事件以更新最后操作的时间戳。

1、实现步骤

1. 当用户登录成功时记录当前的时间 startTime 。
2. 通过监听用户的 mousemove 、mousedown、keydown 、click、scroll 、touchstart等事件每次检测到用户有操作时记录当前的时间 endTime 。
3. 检测当前时间 endTime 与上次操作时间 lastTime 的时间差如果大于设定的闲置时间 idleTime 则自动退出登录否则更新上次操作时间为当前时间。
4. 在页面跳转时或者退出登录时清除定时器 timer。

2、实现代码

// 闲置时间间隔以毫秒为单位
const idleTime = 60 * 1000;

let startTime = new Date().getTime(),
  lastTime = startTime,
  timer;

function startLogoutTimer() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    console.log('长时间无操作自动退出登录');
    // 在这里可以实现用户退出登录的操作
  }, idleTime);
}

function stopLogoutTimer() {
  clearTimeout(timer);
}

// 监听鼠标、键盘等事件
['mousemove', 'mousedown', 'keydown', 'scroll', 'touchstart'].forEach(eventName => {
  document.addEventListener(eventName, () => {
    lastTime = new Date().getTime();
    startLogoutTimer();
  });
});

// 在页面卸载时停止计时器
window.addEventListener('beforeunload', () => {
  stopLogoutTimer();
});

3、代码讲解

上述代码中首先定义了闲置时间间隔 idleTime。在用户登录成功后记录当前的时间戳作为起始时间 startTime 和上次操作时间 lastTime。然后通过监听 mousemove 、keydown 、click、scroll 等事件每次检测到用户有操作时记录当前的时间戳并启动定时器 timer 以检测用户是否处于闲置状态。

在定时器回调函数中根据当前时间戳 lastTime 和上次操作时间 lastTime 的时间差是否大于闲置时间 idleTime来自动执行退出登录的操作。

最后在页面卸载时停止计时器避免造成无效的资源浪费。

4、注意事项

需要注意的是该方案中可能存在一些特殊的场景例如用户在打开多个标签页时只有当前标签页被标记为非闲置状态时计时器才会被重置因此需要根据实际情况进行调整。