用户长时间无操作返回登录页

main.ts

1.定义定时器

const timeout = 3000;
let timer: any;

const resetTimer = () => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    showLogoutWarning();
  }, timeout);
};

2.监听事件，触发定时器

const events = [
  "load", // 资源加载完成
  "mousemove", // 移动鼠标
  "mousedown", // 按下鼠标
  "click", // 点击鼠标
  "scroll", // 页面滚动
  "keypress", // 键盘按下
];

// 导航守卫
router.beforeEach((to, _, next) => {
  if (to.path !== "/login") {
    resetTimer(); // 仅在非登录页时启动计时器
    events.forEach((event) => window.addEventListener(event, resetTimer));
  } else {
    clearTimeout(timer); // 登录页不启动计时器
    events.forEach((event) => window.removeEventListener(event, resetTimer));
  }
  next();
});

3.提示信息

const showLogoutWarning = () => {
  ElNotification({
    title: "提示",
    message: "您已超过3秒钟无操作，将被强制登出",
    type: "warning",
    duration: 1000, // 1秒
    onClose: () => {
      logoutUser();
    },
  });
};

4.返回登录页

const logoutUser = () => {
  // 清除用户状态，例如本地存储的token
  localStorage.removeItem("userToken");
  // 其他登出逻辑
  router.push("/login"); // 重定向到登录页面
};

5.完成

完整代码

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus, { ElNotification } from "element-plus";
import "element-plus/dist/index.css";
import router from "./router";

const app = createApp(App);
const timeout = 3000;
let timer: any;

const resetTimer = () => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    showLogoutWarning();
  }, timeout);
};

const events = [
  "load", // 资源加载完成
  "mousemove", // 移动鼠标
  "mousedown", // 按下鼠标
  "click", // 点击鼠标
  "scroll", // 页面滚动
  "keypress", // 键盘按下
];

const showLogoutWarning = () => {
  ElNotification({
    title: "提示",
    message: "您已超过3秒钟无操作，将被强制登出",
    type: "warning",
    duration: 1000, // 1秒
    onClose: () => {
      logoutUser();
    },
  });
};

const logoutUser = () => {
  // 清除用户状态，例如本地存储的token
  localStorage.removeItem("userToken");
  // 其他登出逻辑
  router.push("/login"); // 重定向到登录页面
};

// 导航守卫
router.beforeEach((to, _, next) => {
  if (to.path !== "/login") {
    resetTimer(); // 仅在非登录页时启动计时器
    events.forEach((event) => window.addEventListener(event, resetTimer));
  } else {
    clearTimeout(timer); // 登录页不启动计时器
    events.forEach((event) => window.removeEventListener(event, resetTimer));
  }
  next();
});

app.use(ElementPlus);
app.use(router);
app.mount("#app");