ASP.NET Core 3.1：关闭项目标签页时删除登录Cookie的实现方案

我之前碰到过一模一样的场景——默认的IsPersistent = false只会在整个浏览器进程关闭时清除会话Cookie，单个标签页关闭后浏览器进程还在，Cookie自然留着。要实现单个标签页关闭就强制注销，得结合前端监听标签页关闭事件和后端主动清除Cookie来做，下面是具体的实现方案：

核心思路 #

浏览器的会话Cookie（非持久化）是和浏览器进程绑定的，单标签页关闭不会触发进程销毁，所以无法自动清除。我们需要在用户关闭标签页时，通过前端发送一个请求通知后端，让后端调用注销接口删除认证Cookie。

步骤1：后端添加注销接口 #

在你的AccountController里新增一个Logout接口，用于接收前端的注销请求并清除Cookie：

public class AccountController : Controller
{
    // 其他现有方法...

    [HttpPost]
    [ValidateAntiForgeryToken] // 别忘了加防伪验证，安全起见
    public async Task<IActionResult> Logout()
    {
        // 调用SignOutAsync清除认证Cookie
        await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
        return Ok("已成功注销");
    }
}

步骤2：前端监听标签页关闭事件 #

在你的布局页（比如_Layout.cshtml）里添加一段JavaScript，监听beforeunload事件（标签页关闭/刷新时触发），并发送带keepalive参数的请求到后端注销接口——这个keepalive很关键，能确保浏览器在关闭标签前完成请求发送：

<script>
window.addEventListener('beforeunload', async (event) => {
    try {
        // 发送POST注销请求，必须带credentials确保Cookie被传递
        await fetch('/Account/Logout', {
            method: 'POST',
            credentials: 'include',
            keepalive: true,
            headers: {
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                // 带上防伪令牌，和后端的[ValidateAntiForgeryToken]对应
            }
        });
    } catch (error) {
        console.error('注销请求发送失败:', error);
    }
});
</script>

额外优化：区分刷新和关闭标签页（可选） #

如果你不想在用户刷新页面时也触发注销，可以结合visibilitychange事件做简单区分，比如：

<script>
let isPageVisible = true;

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
    isPageVisible = document.visibilityState === 'visible';
});

window.addEventListener('beforeunload', async (event) => {
    // 只有当页面是可见状态下的关闭才触发注销（避免刷新时误触发）
    if (isPageVisible) {
        try {
            await fetch('/Account/Logout', {
                method: 'POST',
                credentials: 'include',
                keepalive: true,
                headers: {
                    'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                }
            });
        } catch (error) {
            console.error('注销请求发送失败:', error);
        }
    }
});
</script>

为什么之前的方案不行？ #

你设置的IsPersistent = false只是把Cookie标记为会话Cookie，这类Cookie存储在浏览器内存中，只有当整个浏览器进程完全关闭（所有标签页都关了）时才会被清除。单个标签页关闭不会销毁浏览器进程，所以Cookie会保留下来。

备选方案：利用sessionStorage做标签页隔离 #

如果前端请求的方式你觉得有风险（比如网络问题导致请求没发到后端），可以用sessionStorage的标签页隔离特性来实现：每个标签页的sessionStorage是独立的，当用户关闭标签再打开新标签时，sessionStorage是空的，这时我们就强制用户登录：

<script>
window.addEventListener('load', () => {
    // 页面加载时检查sessionStorage中的标记
    if (!sessionStorage.getItem('isSessionActive')) {
        // 没有标记说明是新打开的标签，主动注销并跳转到登录页
        fetch('/Account/Logout', {
            method: 'POST',
            credentials: 'include',
            headers: {
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            }
        }).then(() => {
            window.location.href = '/Account/Login';
        });
    }
    // 设置会话标记
    sessionStorage.setItem('isSessionActive', 'true');
});

// 关闭标签时清除标记
window.addEventListener('beforeunload', () => {
    sessionStorage.removeItem('isSessionActive');
});
</script>

这个方案的好处是不需要依赖关闭时的请求，但如果用户直接在当前标签页输入登录后的路由，还是会绕过验证，所以建议和后端的认证逻辑结合使用。

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