Selaa lähdekoodia

关闭浏览器下线&长时间失去焦点校验

panhui 5 vuotta sitten
vanhempi
commit
fb7fcb0a2f

+ 42 - 0
src/main/vue/src/App.vue

@@ -2,6 +2,48 @@
     <router-view></router-view>
     <router-view></router-view>
 </template>
 </template>
 
 
+<script>
+export default {
+    data() {
+        return {
+            timer: null
+        };
+    },
+    mounted() {
+        window.addEventListener('visibilitychange', this.focusChange);
+    },
+    destroyed() {
+        window.removeEventListener('visibilitychange');
+    },
+    methods: {
+        focusChange() {
+            if (document.hidden) {
+                // 失去焦点
+                console.log('失去焦点');
+
+                if (this.timer) {
+                    clearTimeout(this.timer);
+                }
+
+                this.timer = setTimeout(() => {
+                    if (this.$route.name !== 'login' && document.hidden) {
+                        sessionStorage.removeItem('token');
+                        this.$alert('网站由于长时间未访问,已经下线账号', '提示', {
+                            confirmButtonText: '确定',
+                            callback: action => {
+                                this.$router.push('/login');
+                            }
+                        });
+                    }
+                }, 1000 * 3);
+            } else {
+                // 获取焦点
+            }
+        }
+    }
+};
+</script>
+
 <style lang="less">
 <style lang="less">
 @import url(./styles/app.less);
 @import url(./styles/app.less);
 </style>
 </style>

+ 1 - 1
src/main/vue/src/components/CropUpload.vue

@@ -55,7 +55,7 @@ export default {
             },
             },
             loading: false,
             loading: false,
             headers: {
             headers: {
-                Authorization: 'Bearer ' + localStorage.getItem('token')
+                Authorization: 'Bearer ' + sessionStorage.getItem('token')
             }
             }
         };
         };
     },
     },

+ 1 - 1
src/main/vue/src/components/FileUpload.vue

@@ -84,7 +84,7 @@ export default {
     computed: {
     computed: {
         headers() {
         headers() {
             return {
             return {
-                Authorization: 'Bearer ' + localStorage.getItem('token')
+                Authorization: 'Bearer ' + sessionStorage.getItem('token')
             };
             };
         },
         },
         filesLimit() {
         filesLimit() {

+ 1 - 1
src/main/vue/src/components/FileUpload2.vue

@@ -83,7 +83,7 @@ export default {
     computed: {
     computed: {
         headers() {
         headers() {
             return {
             return {
-                Authorization: 'Bearer ' + localStorage.getItem('token')
+                Authorization: 'Bearer ' + sessionStorage.getItem('token')
             };
             };
         },
         },
         filesLimit() {
         filesLimit() {

+ 1 - 1
src/main/vue/src/components/MultiUpload.vue

@@ -58,7 +58,7 @@ export default {
     computed: {
     computed: {
         headers() {
         headers() {
             return {
             return {
-                Authorization: 'Bearer ' + localStorage.getItem('token')
+                Authorization: 'Bearer ' + sessionStorage.getItem('token')
             };
             };
         }
         }
     },
     },

+ 1 - 1
src/main/vue/src/components/SingleUpload.vue

@@ -47,7 +47,7 @@ export default {
     computed: {
     computed: {
         headers() {
         headers() {
             return {
             return {
-                Authorization: 'Bearer ' + localStorage.getItem('token')
+                Authorization: 'Bearer ' + sessionStorage.getItem('token')
             };
             };
         }
         }
     },
     },

+ 1 - 1
src/main/vue/src/components/VideoUpload.vue

@@ -42,7 +42,7 @@ export default {
     computed: {
     computed: {
         headers() {
         headers() {
             return {
             return {
-                Authorization: 'Bearer ' + localStorage.getItem('token')
+                Authorization: 'Bearer ' + sessionStorage.getItem('token')
             };
             };
         }
         }
     },
     },

+ 1 - 1
src/main/vue/src/router.js

@@ -521,7 +521,7 @@ router.beforeEach((to, from, next) => {
                     });
                     });
             })
             })
             .catch(() => {
             .catch(() => {
-                localStorage.removeItem('token');
+                sessionStorage.removeItem('token');
                 next('/login');
                 next('/login');
             });
             });
     } else if (!to.matched.length) {
     } else if (!to.matched.length) {

+ 2 - 2
src/main/vue/src/views/Admin.vue

@@ -228,7 +228,7 @@ export default {
         },
         },
         onCommand(command) {
         onCommand(command) {
             if (command === 'logout') {
             if (command === 'logout') {
-                localStorage.removeItem('token');
+                sessionStorage.removeItem('token');
                 this.$store.commit('updateUserInfo', null);
                 this.$store.commit('updateUserInfo', null);
                 this.$store.commit('updateOrganization', null);
                 this.$store.commit('updateOrganization', null);
                 this.$router.replace('/login');
                 this.$router.replace('/login');
@@ -261,7 +261,7 @@ export default {
                             console.log(res);
                             console.log(res);
                             this.pwdLoading = false;
                             this.pwdLoading = false;
                             this.showPwdDialog = false;
                             this.showPwdDialog = false;
-                            localStorage.removeItem('token');
+                            sessionStorage.removeItem('token');
                             this.$store.commit('updateUserInfo', null);
                             this.$store.commit('updateUserInfo', null);
                             this.$router.replace('/login');
                             this.$router.replace('/login');
                             this.$message.success('修改成功,请重新登录');
                             this.$message.success('修改成功,请重新登录');

+ 1 - 1
src/main/vue/src/views/Api.vue

@@ -184,7 +184,7 @@ export default {
                         method: this.formData.method,
                         method: this.formData.method,
                         url: this.formData.url,
                         url: this.formData.url,
                         headers: {
                         headers: {
-                            Authorization: 'Bearer ' + localStorage.getItem('token')
+                            Authorization: 'Bearer ' + sessionStorage.getItem('token')
                         }
                         }
                     };
                     };
                     if (this.formData.method === 'get') {
                     if (this.formData.method === 'get') {

+ 2 - 2
src/main/vue/src/views/Login.vue

@@ -325,7 +325,7 @@ export default {
                             remember: this.rememberMe
                             remember: this.rememberMe
                         })
                         })
                         .then(res => {
                         .then(res => {
-                            localStorage.setItem('token', res);
+                            sessionStorage.setItem('token', res);
                             return this.$store.dispatch('getUserInfo');
                             return this.$store.dispatch('getUserInfo');
                         })
                         })
                         .then(res => {
                         .then(res => {
@@ -363,7 +363,7 @@ export default {
                             return Promise.reject(e);
                             return Promise.reject(e);
                         })
                         })
                         .then(res => {
                         .then(res => {
-                            localStorage.setItem('token', res);
+                            sessionStorage.setItem('token', res);
                             return this.$store.dispatch('getUserInfo');
                             return this.$store.dispatch('getUserInfo');
                         })
                         })
                         .then(res => {
                         .then(res => {