系统闲置超时设置

src/App.vue

@@ -6,8 +6,22 @@
 
 <script setup lang="ts">
 import useAppStore from '@/store/modules/app';
+import useUserStore from '@/store/modules/user';
 
 const appStore = useAppStore();
+const userStore = useUserStore();
+
+watch(
+  () => userStore.token,
+  () => {
+    if (userStore.token) {
+      userStore.setTimeoutInterval();
+    }
+  },
+  {
+    immediate: true
+  }
+);
 </script>
 
 <style>

src/permission.ts

@@ -23,6 +23,8 @@ router.beforeEach(async (to, from, next) => {
       NProgress.done();
     } else if (whiteList.indexOf(to.path as string) !== -1) {
       usePermissionStore().setMenu(to);
+      // 更新最后操作时间
+      useUserStore().updateLastRequestTime();
       next();
     } else {
       if (useUserStore().roles.length === 0) {
@@ -44,10 +46,14 @@ router.beforeEach(async (to, from, next) => {
           //   }
           // });
           usePermissionStore().setMenu(to);
+          // 更新最后操作时间
+          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 {
         usePermissionStore().setMenu(to);
+        // 更新最后操作时间
+        useUserStore().updateLastRequestTime();
         next();
       }
     }

src/store/modules/user.ts

@@ -14,6 +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>();
 
   /**
    * 登录
@@ -31,7 +35,6 @@ export const useUserStore = defineStore('user', () => {
     return Promise.reject(err);
   };
 
-  
   /**
    * 粤政易登录
    * @param userInfo
@@ -103,6 +106,33 @@ 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,
@@ -116,7 +146,9 @@ export const useUserStore = defineStore('user', () => {
     getInfo,
     logout,
     setAvatar,
-    loginWithUsbkey
+    loginWithUsbkey,
+    setTimeoutInterval,
+    updateLastRequestTime
   };
 });
 

src/utils/request.ts

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