在你的 Vue.js 组件中，你已经实现了对页面刷新的检测和关闭窗口时的处理，但可能会遇到一些问题，例如在刷新页面时也执行了注销操作。这是因为你在 beforeunload 事件中进行了一些逻辑判断，而这些逻辑可能未能正确区分刷新与关闭窗口的行为。
让我们来优化一下这部分代码，以便能够更清晰地识别用户是否是在刷新页面，而不是直接关闭浏览器：
优化建议
- 利用 Performance API 检测页面类型：使用
performance.getEntriesByType('navigation')来检测导航类型，进而决定如何处理beforeunload事件。 - 增强状态管理：确保每次加载后都设置好状态，并且当状态表明是刷新时，避免不必要的注销操作。
改进后的代码
以下是改进过的代码示例：
<template><div id="app"><router-view /></div></template><script>import api from '@/store/api';export default {name: 'App',data() {return {isReload: false,};},computed: {assetTag() {return this.$store.getters['global/assetTag'];},},watch: {assetTag(tag) {if (tag) {document.title = `${tag} - ${this.$route.meta.title}`;}},$route(to) {document.title = to.meta.title || 'Page is missing title';if (this.assetTag) {document.title = `${this.assetTag} - ${to.meta.title}`;}},},created() {document.title = this.$route.meta.title || 'Page is missing title';let icoFlag = localStorage.getItem('CustomWebLogo');var link =document.querySelector("link[rel*='icon']") ||document.createElement('link');link.type = 'image/x-icon';link.rel = 'shortcut icon';link.href = `${icoFlag}.ico`;document.head.appendChild(link);this.$store.dispatch('authentication/twoFactorLogin').then(() => {this.$router.push('/');});// 检测页面是否为重新加载this.detectPageReload();},mounted() {window.addEventListener('beforeunload', this.handleBeforeUnload);},beforeDestroy() {window.removeEventListener('beforeunload', this.handleBeforeUnload);},methods: {detectPageReload() {const navEntries = performance.getEntriesByType('navigation');const isReload =navEntries.length > 0 && navEntries[0].type === 'reload';// 如果是刷新，则设置标记if (isReload) {sessionStorage.setItem('isPageReload', 'true');// 短暂延迟后清除标记，防止关闭误判setTimeout(() => sessionStorage.removeItem('isPageReload'), 50);}},handleBeforeUnload(event) {const isReload = sessionStorage.getItem('isPageReload');// 强制触发浏览器默认弹窗event.preventDefault();event.returnValue = '';if (!isReload) {// 执行关闭窗口时的退出操作this.logoutUser();} else {// 清除标记，表示该次 unload 是由于刷新引起的，不做任何操作sessionStorage.removeItem('isPageReload');}},logoutUser() {api.post('/logout', { data: [] });sessionStorage.removeItem('TOKEN');localStorage.removeItem('storedUsername');},},};</script><style lang="scss">@import '@/assets/styles/_obmc-custom';</style>
修改要点：
- 状态管理：确保在
detectPageReload()中准确设置和清除刷新标记。 - 事件处理：在
handleBeforeUnload()中，如果检测到是重载（即页面刷新的情况），则只需清除标记并返回，不执行注销操作。 - 不必要的监听器：移除了对
load的监听，因为你的需求主要集中在监听页面卸载。
这样一来，当用户尝试离开页面时，通过设定好的机制，你可以更准确地判断他们是在进行何种操作，从而作出相应的响应。
内容由零声教学AI助手提供，问题来源于学员提问
