Browse Source

fix(App): 修复浏览器关闭时自动退出登录功能

- 页面加载时标记为"活动状态"
- 监听页面显示事件处理从缓存恢复的情况
- 添加handlePageShow方法在页面显示时恢复活动状态
- 修改handleBeforeUnload逻辑使用延迟检查区分关闭和刷新
- 添加sessionStorage状态标记判断是否真正关闭浏览器
- 优化退出登录触发机制避免误触发
master
常熟吴彦祖 1 day ago
parent
commit
0cfb368ff4
  1. 36
      src/App.vue

36
src/App.vue

@ -18,12 +18,19 @@
this.versionReload() this.versionReload()
}, },
mounted() { mounted() {
// "" - rqrq
sessionStorage.setItem('page_active', 'true')
// 退 - rqrq // 退 - rqrq
window.addEventListener('beforeunload', this.handleBeforeUnload) window.addEventListener('beforeunload', this.handleBeforeUnload)
// - rqrq
window.addEventListener('pageshow', this.handlePageShow)
}, },
beforeDestroy() { beforeDestroy() {
// - rqrq // - rqrq
window.removeEventListener('beforeunload', this.handleBeforeUnload) window.removeEventListener('beforeunload', this.handleBeforeUnload)
window.removeEventListener('pageshow', this.handlePageShow)
}, },
methods: { methods: {
versionReload(){ versionReload(){
@ -37,14 +44,29 @@
location.reload(); location.reload();
} }
}, },
// - rqrq
handlePageShow() {
sessionStorage.setItem('page_active', 'true')
},
// 退 - rqrq // 退 - rqrq
handleBeforeUnload() {
const token = this.$cookie.get('token')
if (token && token.trim()) {
// 使 sendBeacon 退 - rqrq
const url = this.$http.adornUrl('/sys/logout')
navigator.sendBeacon(url, new Blob([JSON.stringify({ token })], { type: 'application/json' }))
}
handleBeforeUnload(e) {
// "" - rqrq
sessionStorage.setItem('page_active', 'false')
// 50ms- rqrq
setTimeout(() => {
const pageActive = sessionStorage.getItem('page_active')
// 50msfalse退 - rqrq
if (pageActive === 'false') {
const token = this.$cookie.get('token')
if (token && token.trim()) {
// 使 sendBeacon 退 - rqrq
const url = this.$http.adornUrl('/sys/logout')
navigator.sendBeacon(url, new Blob([JSON.stringify({ token })], { type: 'application/json' }))
console.log('检测到浏览器/标签页关闭,已自动退出登录 - rqrq')
}
}
}, 50)
} }
} }
} }

Loading…
Cancel
Save