如何在MVC单页应用中基于Asp.net Identity Cookie显示过期弹窗

我太懂你的困扰了——单页应用全程靠AJAX和服务器通信，页面根本不刷新，服务器端的Session.Timeout完全没法触发前端的提示。咱们得从Asp.net Identity的认证Cookie入手，结合前端定时器来搞定这个问题，分几步来：

1. 先正确配置Identity认证Cookie的超时规则 #

首先要明确：你之前改web.config里的Session.Timeout没用，因为Asp.net Identity用的是认证Cookie，不是传统的Session Cookie。得在ConfigureAuth方法里直接配置Cookie的过期逻辑：

public void ConfigureAuth(IAppBuilder app)
{
    // 配置Cookie认证核心参数
    app.UseCookieAuthentication(new CookieAuthenticationOptions
    {
        AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
        LoginPath = new PathString("/Account/Login"),
        // 设置Cookie总超时时间，比如30分钟
        ExpireTimeSpan = TimeSpan.FromMinutes(30),
        // 开启滑动过期：用户有活动（比如AJAX请求）就自动延长Cookie有效期
        SlidingExpiration = true,
        Provider = new CookieAuthenticationProvider
        {
            // 用户登录成功时，把剩余会话时间通过响应头传给前端
            OnResponseSignIn = context =>
            {
                var remainingSeconds = context.Properties.ExpiresUtc?.Value.Subtract(DateTime.UtcNow).TotalSeconds;
                if (remainingSeconds.HasValue)
                {
                    context.Response.Headers.Add("X-Session-Remaining", remainingSeconds.Value.ToString());
                }
            },
            // 滑动过期刷新Cookie时，同步更新前端的剩余时间
            OnResponseRefreshCookie = context =>
            {
                var remainingSeconds = context.Properties.ExpiresUtc?.Value.Subtract(DateTime.UtcNow).TotalSeconds;
                if (remainingSeconds.HasValue)
                {
                    context.Response.Headers.Add("X-Session-Remaining", remainingSeconds.Value.ToString());
                }
            }
        }
    });
}

这里的关键是SlidingExpiration=true，它会在用户有授权请求时自动续期Cookie；同时通过自定义响应头X-Session-Remaining把剩余时间传给前端——因为默认Identity的Cookie是HttpOnly的，JS没法直接读取，用响应头是最安全可靠的方式。

2. 前端实现定时器与过期提醒逻辑 #

前端要做三件核心事：登录成功后初始化定时器、每次AJAX请求后更新定时器、剩余时间不足时触发提醒。用jQuery举个示例：

let sessionTimeoutTimer;
let sessionRemainingSeconds;

// 初始化/重置会话定时器
function initSessionTimer(remainingSeconds) {
    // 清除旧定时器，避免重复计时
    if (sessionTimeoutTimer) clearInterval(sessionTimeoutTimer);
    
    sessionRemainingSeconds = parseInt(remainingSeconds);
    checkSessionStatus();
    
    // 每秒更新剩余时间
    sessionTimeoutTimer = setInterval(() => {
        sessionRemainingSeconds--;
        checkSessionStatus();
    }, 1000);
}

// 检查会话状态，触发提醒或跳转
function checkSessionStatus() {
    if (sessionRemainingSeconds <= 0) {
        // 会话已过期，清除定时器并引导登录
        clearInterval(sessionTimeoutTimer);
        $('#session-expired-modal').modal('show');
        setTimeout(() => window.location.href = '/Account/Login', 3000);
    } else if (sessionRemainingSeconds <= 300) {
        // 剩余5分钟时显示提醒弹窗
        $('#session-warning-modal').modal('show');
    }
}

// 全局拦截AJAX请求，自动更新会话剩余时间
$(document).ajaxComplete(function(event, xhr) {
    const remaining = xhr.getResponseHeader('X-Session-Remaining');
    if (remaining) initSessionTimer(remaining);
});

// 登录成功后初始化定时器（示例）
$('#login-form').submit(function(e) {
    e.preventDefault();
    $.post('/Account/Login', $(this).serialize())
    .done((_, __, xhr) => {
        const remaining = xhr.getResponseHeader('X-Session-Remaining');
        if (remaining) initSessionTimer(remaining);
    });
});

3. 处理AJAX请求返回401的异常情况 #

有时候定时器可能因为本地时间偏差、Cookie被意外清除等原因失效，这时候AJAX请求会返回401未授权，咱们得全局拦截这种情况做兜底：

$(document).ajaxError(function(event, xhr) {
    if (xhr.status === 401) {
        clearInterval(sessionTimeoutTimer);
        alert('会话已过期，请重新登录');
        window.location.href = '/Account/Login';
    }
});

4. 额外优化建议 #

• 友好的弹窗交互：把示例里的alert换成Bootstrap模态框，给用户加个「继续会话」按钮，点击后发送一个空的AJAX请求到授权接口（比如/api/Account/KeepAlive），触发滑动过期刷新Cookie。
• 避免重复提醒：弹窗显示后可以加个标记，避免每秒重复弹出。
• 时间同步：后端用UTC时间计算剩余时间，前端也基于UTC计时，避免本地时间偏差导致的计时错误。

这样一套流程下来，就能完美适配单页应用的场景，既遵循了Asp.net Identity的认证规则，又能及时给用户会话过期的提示。

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