需结合前端定时器与后端Token作废实现：监听mousemove、keydown、scroll、focusin、touchstart等事件重置倒计时，超时后先调用/logout接口使Token失效，再清除本地token并跳转登录页；多标签页需用storage事件同步，后台切换应监听visibilitychange。
如何用 layui 实现无操作自动登出？
layui 本身不提供登录态管理或定时登出逻辑，必须自己结合前端定时器 + 后端 Token 有效期控制来实现。核心思路是：用户每次交互（点击、输入、滚动等）重置倒计时，倒计时归零后清空本地 localStorage 或 sessionStorage 中的 token，再跳转到登录页。
监听用户操作并重置倒计时的关键点
不能只监听 click，漏掉键盘输入、滚动、tab 切换等行为会导致误登出。推荐监听一组基础事件：
-
mousemove、keydown、scroll、focusin（覆盖表单聚焦）、touchstart（移动端） - 使用
document级监听，避免漏掉动态插入的 DOM - 防抖不是必须，但建议加
setTimeout清除旧定时器，避免重复 set
示例片段（放在 layui layui.use 块内或全局 JS）：
let idleTimer;
const IDLE_TIMEOUT = 15 * 60 * 1000; // 15 分钟
<p>function resetIdleTimer() {
clearTimeout(idleTimer);
idleTimer = setTimeout(logout, IDLE_TIMEOUT);
}</p><p>function logout() {
localStorage.removeItem('token');
layui.layer.msg('已退出登录', { icon: 7 });
location.href = '/login.html';
}</p><p>['mousemove', 'keydown', 'scroll', 'focusin', 'touchstart'].forEach(event => {
document.addEventListener(event, resetIdleTimer, true);
});</p><p>resetIdleTimer(); // 初始化启动
</p>
Token 销毁为什么不能只删前端？
只删 localStorage.token 是不安全的——攻击者仍可用该 token 继续调用接口。必须同步通知后端作废该 token：
- 登出前发一次
POST /api/logout，携带当前token，后端将其加入黑名单或清除 session - 如果用 JWT，且后端没做黑名单，那只能依赖短有效期（如 15 分钟），此时前端登出只是 UX 层面的“视觉退出”
- 注意：
logout()函数里应先发请求，成功后再跳转；失败也要清 token 并提示，避免卡在页面
容易被忽略的边界情况
真实场景下这几个点常导致自动登出失效或误触发：
- 多个浏览器标签页共用同一
localStorage，一个页面操作不会重置另一个页面的倒计时 → 需用storage事件广播重置 - 用户切到其他标签页或最小化窗口，
visibilitychange事件比单纯计时更可靠，建议叠加监听 - layui 的弹层（
layer.open）、iframe 内容、富文本编辑器内部操作可能不冒泡到document→ 需额外绑定到对应容器 - 移动端 WebView 中，
touchstart可能被拦截，建议加上touchmove
复杂点不在代码多长，而在这些细节是否兜住。尤其是多标签页和后台 tab 切换，不处理就会出现“看着在线，其实已掉线”的体验断层。
