Vue.js+ASP.NET Core浏览器关闭时触发logout方法问题求助

你的核心问题在于：

1. beforeunload事件中使用异步Axios请求，浏览器会在页面卸载时终止未完成的异步请求，导致logout接口无法被成功调用。
2. isInternalNavigation的判断逻辑无法区分内部跳转/刷新和关闭标签页/浏览器，两种场景下window.location.pathname均以/Painel开头。
3. 事件绑定与移除不匹配：attachBeforeUnload中绑定的是匿名函数，beforeDestroy里的移除操作无效，可能导致重复绑定。

具体修复步骤 #

1. 用navigator.sendBeacon替代Axios发送卸载请求

sendBeacon是浏览器专为页面卸载场景设计的API，会异步但可靠地完成请求，不会阻塞页面卸载，也不会被浏览器轻易终止。

修改代码，新增卸载专用的unloadLogout方法：

methods: {
    // 保留原logout方法，用于主动点击退出
    logout() {
        axios.post('/api/agent/logout')
            .then(response => {
                localStorage.removeItem('elapsedTime');
                localStorage.removeItem('currentStatus');
                localStorage.removeItem('startTime');
                window.location.href = '/Painel/Login';
            })
            .catch(error => {
                console.error('退出失败:', error);
            });
    },
    // 新增：卸载时调用的logout逻辑
    unloadLogout() {
        // 构造JSON格式请求体（适配后端接口）
        const blob = new Blob([JSON.stringify({})], { type: 'application/json' });
        navigator.sendBeacon('/api/agent/logout', blob);
        // 清除本地存储
        localStorage.removeItem('elapsedTime');
        localStorage.removeItem('currentStatus');
        localStorage.removeItem('startTime');
    },
    // ...其他原有方法
}

2. 正确区分内部导航/刷新与关闭操作

通过全局标记+SessionStorage区分操作类型：

• 监听页面内链接点击，标记内部导航行为
• 用SessionStorage标记刷新操作，避免刷新时触发logout

修改代码如下：

new Vue({
    el: '#layout-wrapper',
    data: {
        currentStatus: localStorage.getItem('currentStatus') || 'Offline',
        elapsedTime: localStorage.getItem('elapsedTime') || '00:00:00',
        startTime: (() => {
            const stored = localStorage.getItem('startTime');
            return stored && !isNaN(new Date(stored).getTime()) ? new Date(stored) : new Date();
        })(),
        intervalId: null,
        isInternalNav: false // 标记是否为内部导航
    },
    created() {
        // 页面加载时清除刷新标记
        sessionStorage.removeItem('isRefreshing');
    },
    mounted() {
        this.startTimer();
        this.attachEventListeners();
    },
    methods: {
        attachEventListeners() {
            // 监听所有链接点击，标记内部导航
            document.addEventListener('click', (e) => {
                let target = e.target;
                while (target && target.tagName !== 'A') {
                    target = target.parentNode;
                }
                if (target?.tagName === 'A') {
                    const href = target.getAttribute('href');
                    if (href.startsWith('/Painel') || href.startsWith('./') || href.startsWith('../') || href === '') {
                        this.isInternalNav = true;
                        setTimeout(() => this.isInternalNav = false, 3000);
                    }
                }
            });

            // 绑定beforeunload事件（使用命名函数方便移除）
            window.addEventListener('beforeunload', this.handleBeforeUnload);
        },
        handleBeforeUnload() {
            // 标记刷新操作
            sessionStorage.setItem('isRefreshing', 'true');
            // 仅当非内部导航且非刷新时，触发logout
            if (!this.isInternalNav && sessionStorage.getItem('isRefreshing') !== 'true') {
                this.unloadLogout();
            }
            sessionStorage.removeItem('isRefreshing');
        },
        // ...其他原有方法
    },
    beforeDestroy() {
        // 移除事件监听
        window.removeEventListener('beforeunload', this.handleBeforeUnload);
        document.removeEventListener('click', this.handleClick);
    }
});

3. 后端接口适配

确保ASP.NET Core的/api/agent/logout接口支持接收application/json格式的请求（如果用Blob发送JSON），或者直接处理无参数的POST请求即可。

4. 兜底方案：心跳机制

由于部分浏览器隐私设置可能阻止sendBeacon，建议后端实现心跳兜底：

• 前端每隔30秒发送一次心跳请求，后端记录用户最后活跃时间
• 后端定时检查，若用户超过5分钟无心跳，自动将状态设为Offline

内容的提问来源于stack exchange，提问作者Rodrigo Morais