添加未操作自动推出系统功能

src/App.vue

@@ -46,6 +46,9 @@ import login from "@/page/login/index.vue";
 import page404 from "@/page/404.vue";
 import register from "@/page/register/index.vue";
 import password from "@/page/password/index.vue";
+import { clearCookie } from "@/services/cookie.js";
+import { resetRouter } from "@/router/index";
+
 export default {
   components: {
     bgMenu,
@@ -111,8 +114,64 @@ export default {
   created() {
     // this.initMsg()
   },
-  mounted() {},
+  mounted() {
+    this.getSysOptions();
+  },
   methods: {
+    /**
+     * 设置用户多久不操作就跳转到登录界面
+     * limit:用户无操作时常限制(分钟)
+     */
+
+    exitSystemAfterLimit(limit) {
+      window.lastOperateTime = new Date();
+      window.onload = this.addOperateListener;
+      this.setTimer(limit);
+    },
+    //绑定用户操作事件
+    addOperateListener() {
+      document.addEventListener("mousemove", this.resetStartTime);
+      document.addEventListener("keydown", this.resetStartTime);
+      document.addEventListener("scroll", this.resetStartTime);
+      document.addEventListener("touchstart", this.resetStartTime);
+    },
+    //重置起始时间
+    resetStartTime() {
+      window.lastOperateTime = new Date();
+    },
+    //设置定时器
+    setTimer(limit) {
+      window.logTimer = setInterval(() => {
+        var currentTime = new Date();
+        var timeDiff = currentTime.getTime() - lastOperateTime.getTime();
+        if (timeDiff > limit * 60 * 1000) {
+          clearInterval(window.logTimer);
+          this.$axios.post(`/apaas/system/v5/user/logout`).then((res) => {
+            if (res.data.code == "200") {
+              window.location.href = `/apaas/manage/ui/#/login`;
+              this.$store.commit("setUserInfo", null);
+              clearCookie("bgToken");
+              this.$message.success("退出成功");
+              resetRouter();
+            } else {
+              this.$message.error("退出失败");
+            }
+          });
+        }
+      }, 1000);
+    },
+
+    getSysOptions() {
+      axios.get(`/apaas/system/v5/sysOptions`).then((res) => {
+        if (res.data.code == 200) {
+          const result = res.data.data || {};
+          if (result.session_validity) this.exitSystemAfterLimit(result.session_validity);
+        } else {
+          this.$message.error(res.data.data);
+        }
+      });
+    },
+
     openMsg(data) {
       this.readFlag = !this.readFlag;
     },

src/lipeng.vue

+<template>
+  <div class="h-full" @click="readFlag = false">
+    <el-config-provider>
+      <bg-menu v-if="menuShow" :path="nowParent.path" @open-msg="openMsg" />
+      <div v-if="pageShow" class="container" :class="menuShow ? '' : 'full_screen'">
+        <bg-nav
+          v-if="nowParent.children"
+          v-show="navShow"
+          :highlight-parent-rule="highlightParentRule"
+          width="208px"
+          :list="nowParent.children"
+          class="con-nav" />
+        <div class="bg-main view log_content_nor">
+          <router-view />
+        </div>
+      </div>
+      <div v-else-if="$route.path == '/login'" class="container">
+        <div class="bg-main view">
+          <login />
+        </div>
+      </div>
+      <div v-else-if="$route.path == '/404'" class="container">
+        <div class="bg-main view">
+          <page404 />
+        </div>
+      </div>
+      <msg v-model="readFlag" />
+    </el-config-provider>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeMount, reactive, watch, ref, getCurrentInstance } from "vue";
+import { useRoute } from "vue-router";
+import store from "@/store";
+import bgMenu from "@/components/bg-menu.vue";
+import login from "@/page/login/index.vue";
+import page404 from "@/page/404.vue";
+import axios from "@/request/http.js";
+import { clearCookie } from "@/services/cookie.js";
+import { resetRouter } from "@/router/index";
+
+const route = useRoute();
+const { proxy } = getCurrentInstance();
+const { $trace } = proxy;
+
+const msgBoxFlag = computed(() => {
+  return store.state.msgBoxFlag;
+});
+const userInfo = computed(() => {
+  return store.state.userInfo;
+});
+const navMenu = computed(() => {
+  return store.state.menu;
+});
+const menuObj = computed(() => {
+  return store.state.menuObj;
+});
+const navShow = computed(() => {
+  return (
+    false ||
+    !(
+      excludeMenuArr.includes(route.path) ||
+      excludeMenuArr.includes(store.state.menuObj[route.path].source)
+    )
+  );
+});
+const pageShow = computed(() => {
+  return false || !["/404", "/login"].includes(route.path);
+});
+const rowPath = computed(() => {
+  if (pageShow.value && store.state.userInfo) {
+    return menuObj.value[route.path] && menuObj.value[route.path].rowPath;
+  } else {
+    return "";
+  }
+});
+const nowParent = computed(() => {
+  if (pageShow.value && store.state.userInfo) {
+    return rowPath.value ? navMenu.value[rowPath.value.slice(1, 2)] : "";
+  } else {
+    return "";
+  }
+});
+const menuShow = computed(() => {
+  return false || !["/ui-example"].includes(route.path);
+});
+
+watch(
+  () => msgBoxFlag.value,
+  (n, o) => {
+    readFlag.value = !readFlag.value;
+  }
+);
+watch(
+  () => userInfo.value,
+  (n, o) => {
+    this.initMsg();
+  }
+);
+
+const readFlag = ref(false);
+const excludeMenuArr = reactive([
+  "/",
+  "/404",
+  "/login",
+  "/ability-manage/real-list/detail",
+  "/ability-manage/mock-list/detail",
+  "/ability-register/add/desc",
+  "/ability-register/edit/desc",
+  "/ability-register/add/preview",
+  "/ability-register/edit/preview",
+  "/ui-example",
+  "/ability-register/add/valid",
+  "/ability-manage/ability-maintain/detail",
+  "/ability-manage/sold-approval/detail",
+  "/ability-manage/sold-list/detail",
+  "/ability-manage/search-list/detail",
+  "/ability-manage/my-apply/detail",
+  "/ability-manage/my-apply/update",
+  "/ability-manage/ability-approval/detail",
+  "/shop",
+  "/shop/detail",
+  "/my-subscription",
+  "/my-subscription/ability-shop-apply",
+  "/my-subscription/ability-apply-success",
+  "/password",
+  "/app-manage/app-detail",
+  "/cloud-manage/cloud-detail",
+  "/cloud-manage/my-apply/resource",
+  "/app-manage/deployment-detail",
+  "/customer-support",
+]);
+
+onBeforeMount(() => {
+  initMsg();
+  getSysOptions();
+});
+
+/**
+ * 设置用户多久不操作就跳转到登录界面
+ * limit:用户无操作时常限制(分钟)
+ */
+
+const exitSystemAfterLimit = (limit) => {
+  window.lastOperateTime = new Date();
+  window.onload = addOperateListener;
+  setTimer(limit);
+};
+//绑定用户操作事件
+const addOperateListener = () => {
+  document.addEventListener("mousemove", resetStartTime);
+  document.addEventListener("keydown", resetStartTime);
+  document.addEventListener("scroll", resetStartTime);
+  document.addEventListener("touchstart", resetStartTime);
+};
+//重置起始时间
+const resetStartTime = () => {
+  window.lastOperateTime = new Date();
+};
+//设置定时器
+const setTimer = (limit) => {
+  window.logTimer = setInterval(() => {
+    var currentTime = new Date();
+    var timeDiff = currentTime.getTime() - lastOperateTime.getTime();
+    if (timeDiff > limit * 60 * 1000) {
+      clearInterval(window.logTimer);
+      $axios.post("/apaas/system/v5/user/logout").then((res) => {
+        if (res.data.code == "200") {
+          window.location.href = "/apaas/manage/ui/#/login";
+          $store.commit("setUserInfo", null);
+          clearCookie("bgToken");
+          $message.success("退出成功");
+          resetRouter();
+        } else {
+          $message.error("退出失败");
+        }
+      });
+    }
+  }, 1000);
+};
+
+const getSysOptions = () => {
+  axios.get("/apaas/system/v5/sysOptions").then((res) => {
+    if (res.data.code == 200) {
+      const result = res.data.data || {};
+      if (result.session_validity) exitSystemAfterLimit(result.session_validity);
+    } else {
+      $message.error(res.data.data);
+    }
+  });
+};
+
+const openMsg = (data) => {
+  readFlag.value = !readFlag.value;
+};
+
+const initMsg = () => {
+  if (userInfo.value && userInfo.value && userInfo.value.system_id) {
+    $trace.setOptionValue("userId", userInfo.value.system_id);
+    $trace.setOptionValue("organization", userInfo.value.organization_id);
+  }
+};
+
+const pathToData = (data, path) => {
+  let arr = path.split(".");
+  let temp = null;
+  let tempName = "";
+  let tempPath = "";
+  arr.forEach((e, idx) => {
+    if (idx == 1) {
+      temp = data[e];
+      tempName = data[e].menuName;
+      tempPath = data[e].path;
+      data = data[e];
+    }
+    if (idx == 2) {
+      if (data.children && data.children.length) {
+        temp = data.children[e];
+        data = data.children[e];
+      }
+    }
+  });
+  return {
+    menuName: tempName,
+    path: tempPath,
+    children: [temp],
+  };
+};
+
+const highlightParentRule = (pathArr) => {
+  return pathArr.includes(route.path);
+};
+</script>
+<style>
+.h-full {
+  height: 100%;
+}
+.container {
+  width: 100%;
+  height: calc(100% - 56px);
+  overflow: hidden;
+}
+.full_screen {
+  height: 100%;
+}
+.full_screen .bg-main {
+  overflow-x: hidden;
+}
+.con-nav {
+  float: left;
+}
+.view {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>

src/page/index.vue

 <template>
-    <div style="height:100%;">
-        <router-view></router-view>
-    </div>
+  <div style="height: 100%">
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-
-    },
-    components: {
-
-    },
-    data() {
-        return {
-
-        };
-    },
-    watch: {
-
-    },
-    computed: {
-
-    },
-    created() {
-
-    },
-    mounted() {
-
-    },
-    methods: {
-
-    },
+  props: {},
+  components: {},
+  data() {
+    return {};
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
 };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/page/login/index.vue

@@ -107,6 +107,7 @@ const getSysOptions = () => {
   axios.get(`/apaas/system/v5/sysOptions`).then((res) => {
     if (res.data.code == 200) {
       const result = res.data.data || {};
+      if (result.session_validity) exitSystemAfterLimit(result.session_validity);
       if (result.license_dead_date && result.license_inform_day) {
         calculateValidityDays(
           new Date().getTime(),