layui中实现登录超时自动遮罩弹窗的核心是前端定时检查token过期时间戳，超时则清空凭证、layer全屏遮罩并弹出登录框；同时建议拦截401响应增强体验。
在 Layui 后台框架中实现登录超时自动遮罩并弹出登录框，核心思路是：前端定时检查登录态（如 token 是否过期），触发时用 Layui 的 layer 遮罩全屏并弹出登录层，同时清空本地凭证、跳转或等待重新登录。不依赖后端长连接，轻量可靠。
1. 前端维护登录态与过期时间
登录成功后，除了保存 token（如 localStorage.setItem('token', 'xxx')），务必一并存入过期时间戳：
- 后端返回 token 有效期（如 3600 秒），前端计算
expiresAt = Date.now() + 3600 * 1000 - 存入 localStorage：
localStorage.setItem('expiresAt', expiresAt.toString()) - 避免仅靠 token 存在与否判断——token 可能未过期但服务端已主动失效
2. 启动全局定时检测（推荐放在 common.js 或入口 JS）
页面加载后启动一个每分钟检查一次的定时器：
- 读取
localStorage.expiresAt，若不存在或Date.now() > expiresAt，视为已超时 - 立即清除敏感数据：
localStorage.removeItem('token'); localStorage.removeItem('expiresAt'); - 调用遮罩+登录弹窗函数（见下一步）
- 使用
setInterval即可，无需复杂心跳请求；首次检查可延时 30 秒以避开刚登录场景
3. 用 layer 实现全屏遮罩与登录弹窗
封装一个 showLoginModal() 函数，用 Layui layer 创建不可关闭、不可拖拽的模态层：
- 调用
layer.open({type: 1, title: false, closeBtn: 0, shadeClose: false, area: ['400px', '300px'], content: $('#login-modal').html(), success: function(){...}}) - 遮罩层需覆盖整个视口：
shade: [0.8, '#000']（透明度 0.8 黑色） - 登录表单提交后，校验通过则关闭弹窗：
layer.closeAll();，并刷新当前页或跳转首页 - 表单内建议加「记住我」选项，方便用户选择是否延长本地有效期
4. 拦截接口请求，增强体验（可选但推荐）
配合 axios 或 jQuery ajax 全局拦截响应，当后端返回 401/403 时立即触发登录弹窗：
- 例如 axios.interceptors.response.use(res => res, err => { if (err.response?.status === 401) { showLoginModal(); } return Promise.reject(err); })
- 这样即使用户长时间无操作但中途发了请求，也能及时感知失效，比纯定时更精准
- 注意：该拦截不能替代定时检查——网络异常或用户关机再打开时，定时检查仍是兜底手段
实际部署时，把 token 过期时间设为略短于后端 session 时长（如后端 30 分钟，前端按 28 分钟处理），留出网络延迟余量。整个逻辑不复杂但容易忽略时间戳同步和多端登出清理，上线前建议在无网、切后台、长时间闲置等场景下实测。
