系统闲置超时设置

src/App.vue

@@ -8,8 +8,10 @@
 import useSettingsStore from '@/store/modules/settings';
 import { handleThemeStyle } from '@/utils/theme';
 import useAppStore from '@/store/modules/app';
+import useUserStore from '@/store/modules/user';
 
 const appStore = useAppStore();
+const userStore = useUserStore();
 
 onMounted(() => {
   nextTick(() => {
@@ -17,4 +19,15 @@ onMounted(() => {
     handleThemeStyle(useSettingsStore().theme);
   });
 });
+watch(
+  () => userStore.token,
+  () => {
+    if (userStore.token) {
+      userStore.setTimeoutInterval();
+    }
+  },
+  {
+    immediate: true
+  }
+);
 </script>

src/permission.ts

@@ -21,6 +21,8 @@ router.beforeEach(async (to, from, next) => {
       next({ path: '/' });
       NProgress.done();
     } else if (whiteList.indexOf(to.path as string) !== -1) {
+      // 更新最后操作时间
+      useUserStore().updateLastRequestTime();
       next();
     } else {
       if (useUserStore().roles.length === 0) {
@@ -40,9 +42,13 @@ router.beforeEach(async (to, from, next) => {
               router.addRoute(route); // 动态添加可访问路由表
             }
           });
+          // 更新最后操作时间
+          useUserStore().updateLastRequestTime();
           next({ path: to.path, replace: true, params: to.params, query: to.query, hash: to.hash, name: to.name as string }); // hack方法 确保addRoutes已完成
         }
       } else {
+        // 更新最后操作时间
+        useUserStore().updateLastRequestTime();
         next();
       }
     }

src/store/modules/user.ts

@@ -14,7 +14,10 @@ export const useUserStore = defineStore('user', () => {
   const avatar = ref('');
   const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
   const permissions = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
-
+  // 空闲超时时间
+  const idleTimeout = ref<number>(15 * 60 * 1000);
+  // 最后操作时间
+  const lastRequestTime = ref<number>();
   /**
    * 登录
    * @param userInfo
@@ -100,7 +103,32 @@ export const useUserStore = defineStore('user', () => {
     }
     return Promise.reject(err);
   };
-
+  let interval;
+  const setTimeoutInterval = () => {
+    if (!!interval) {
+      toClearInterval();
+    }
+    lastRequestTime.value = new Date().getTime();
+    interval = setInterval(() => {
+      const currentTime = new Date().getTime();
+      if (currentTime - lastRequestTime.value > idleTimeout.value) {
+        toClearInterval();
+        alert('登录超时,请重新登录');
+        logout().then(() => {
+          location.href = import.meta.env.VITE_APP_CONTEXT_PATH + '#' + 'index';
+        });
+      }
+    }, 5000);
+  };
+  const updateLastRequestTime = () => {
+    lastRequestTime.value = new Date().getTime();
+  };
+  const toClearInterval = () => {
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+  };
   return {
     userId,
     tenantId,
@@ -114,7 +142,9 @@ export const useUserStore = defineStore('user', () => {
     getInfo,
     logout,
     setAvatar,
-    loginWithUsbkey
+    loginWithUsbkey,
+    setTimeoutInterval,
+    updateLastRequestTime
   };
 });
 

src/utils/request.ts

@@ -115,6 +115,8 @@ service.interceptors.response.use(
         res.data = JSON.parse(decryptData);
       }
     }
+    // 更新最后操作时间
+    useUserStore().updateLastRequestTime();
     // 未设置状态码则默认成功状态
     const code = res.data.code || HttpStatus.SUCCESS;
     // 获取错误信息