Browse Source

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

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

24
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() {
handleBeforeUnload(e) {
// 标记为"即将卸载"状态 - rqrq
sessionStorage.setItem('page_active', 'false')
// 延迟50ms检查是否是真正关闭(而不是刷新)- rqrq
setTimeout(() => {
const pageActive = sessionStorage.getItem('page_active')
// 如果50ms后仍然是false,说明是真正关闭,执行退出登录 - rqrq
if (pageActive === 'false') {
const token = this.$cookie.get('token') const token = this.$cookie.get('token')
if (token && token.trim()) { if (token && token.trim()) {
// 使用 sendBeacon 发送退出请求,可靠性高 - rqrq // 使用 sendBeacon 发送退出请求,可靠性高 - rqrq
const url = this.$http.adornUrl('/sys/logout') const url = this.$http.adornUrl('/sys/logout')
navigator.sendBeacon(url, new Blob([JSON.stringify({ token })], { type: 'application/json' })) navigator.sendBeacon(url, new Blob([JSON.stringify({ token })], { type: 'application/json' }))
console.log('检测到浏览器/标签页关闭,已自动退出登录 - rqrq')
}
} }
}, 50)
} }
} }
} }

Loading…
Cancel
Save