JavaScript空闲检测场景下如何判断会话Cookie是否有效

• 基于ASP.NET搭建的客户端CMS，用户登录时会下发登录Cookie：用户勾选「记住我」时Cookie会配置明确的过期时间，未勾选则生成会话级Cookie
• 需要实现前端空闲超时提示：用户连续5分钟无操作时，检测登录Cookie是否仍处于有效状态
• 现存卡点：
  • 原生JS无法通过API读取Cookie的过期时间、类型（会话/持久）属性，没法直接写判断逻辑
  • 跨浏览器兼容问题：Windows端Chrome会自动清理过期Cookie，但Mac端Chrome会保留过期Cookie，仅通过判断Cookie名是否存在的方案无法跨设备生效
• 已实现的空闲检测代码如下：

var idleTime = 0;
$(document).ready(function () {
    var idleInterval = setInterval(timerIncrement, 60000); 
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 4) { 
        triggerAlertSortCookie();
    }
}
function triggerAlertSortCookie() {
  // 待实现：检测AALogin Cookie是否过期，过期则弹出提示并刷新页面
}

首先说死结论：浏览器安全规则限制，前端JS通过document.cookie接口只能拿到非HttpOnly类型Cookie的键值对，expires、max-age、是否会话Cookie这类属性完全读不到，不存在纯前端直接读取Cookie属性判断有效性的方法。
不同浏览器对过期Cookie的回收策略本身就有差异，前端靠猜是猜不准的，可行的落地方案按可靠性排序如下：

方案1：后端提供轻量鉴权接口（全兼容，最推荐） #

这是解决跨浏览器行为不一致的最优方案，完全不用关心前端Cookie的存储状态：

1. 写一个逻辑极简的后端接口（比如/api/check-login-status），接口内部直接判断服务端记录的登录态是否有效，有效返回200状态码，失效返回401状态码即可，不需要返回多余数据
2. 前端触发空闲检测时，调用这个接口拿真实登录状态，结果100%准确
3. 对应代码改造示例：

function triggerAlertSortCookie() {
  fetch('/api/check-login-status', {
    // 确保请求自动带上Cookie凭证
    credentials: 'include'
  }).then(res => {
    if (!res.ok) {
      // 登录态已失效，弹出提示后刷新跳登录页
      alert('登录状态已过期，请重新登录');
      window.location.reload();
      return;
    }
    // 登录态有效，重置空闲计时即可
    idleTime = 0;
  }).catch(() => {
    // 接口请求异常兜底
    alert('网络异常，请刷新页面重试');
  })
}

如果担心请求太频繁，可以给接口结果加个30秒的本地缓存，避免重复调用。

方案2：前端本地同步Cookie元数据（无后端改造成本，适合小项目） #

如果暂时没法改动后端逻辑，可以在登录环节前端自行记录Cookie的配置信息：

1. 页面首次加载、用户登录成功时，从后端返回的响应头或者页面内嵌的全局变量里，拿到当前Cookie的配置：是否勾选了「记住我」、持久Cookie的过期时间戳
2. 把信息存在本地：如果是持久Cookie就把过期时间戳存在localStorage，如果是会话Cookie就在sessionStorage里打个会话标记
3. 空闲检测时直接读本地存的元数据判断：
   • 会话Cookie：只要Cookie键名存在就判定有效（会话Cookie关闭浏览器会自动清除，不存在过期残留问题）
   • 持久Cookie：同时判断Cookie键名存在、当前时间戳小于存储的过期时间戳，两个条件都满足才判定有效

注意这个方案有缺陷：如果用户手动修改本地存储、或者Cookie被插件/服务端提前清理，会出现判断偏差，可靠性不如方案1。

你现有的空闲检测只监听了mousemove和keypress事件，建议补上scroll、click、touchstart事件监听，覆盖鼠标点击滚动条、移动端触屏操作等场景，避免误判用户空闲。
另外1分钟的检测间隔偏长，可以改成30秒触发一次计时，对应把idleTime的阈值调到10，5分钟的计时精度会更高。

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