Переглянути джерело

前端增加关闭浏览器执行后端退出功能

xusl 2 роки тому
батько
коміт
e1daed290c
1 змінених файлів з 34 додано та 3 видалено
  1. 34 3
      ui/src/App.vue

+ 34 - 3
ui/src/App.vue

@@ -1,16 +1,18 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view/>
   </div>
 
 </template>
 
 <script>
+import {removeToken} from "@/utils/auth";
+
 export default {
   name: 'App',
-  mounted(){
+  mounted() {
     // 禁用鼠标右键
-    document.getElementById("app").oncontextmenu = function (e){
+    document.getElementById("app").oncontextmenu = function (e) {
       return false;
     };
     // this.$nextTick(()=>{
@@ -23,6 +25,35 @@ export default {
     //   }
     //
     // })
+    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    window.addEventListener('unload', e => this.unloadHandler(e))
+  },
+  // 解除窗口关闭[监听]事件
+  destroyed() {
+    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    window.removeEventListener('unload', e => this.unloadHandler(e))
+  },
+  methods: {
+    beforeunloadHandler(){
+      this._beforeUnload_time=new Date().getTime();
+    },
+    unloadHandler(e){
+      this._gap_time=new Date().getTime()-this._beforeUnload_time;
+      //判断是窗口关闭还是刷新
+      if(this._gap_time<=5){
+        //如果是登录状态,关闭窗口前,移除用户
+        if(sessionStorage.getItem('jy')!=null){
+          this.$axios.post(
+            '/logout', {}
+          ).then((res) => {
+            this.$message.success(res.data)
+            removeToken()
+            //注销返回自己的登录页
+            this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+          })
+        }
+      }
+    }
   }
 }
 </script>