如何在会话到期前2分钟弹窗，到期后关闭弹窗并跳转？

问题分析 #

你需要在会话到期前2分钟弹出模态窗口，2分钟后自动关闭弹窗并跳转到登录页。现有代码存在计时逻辑错误：第二个setTimeout的延迟计算重复乘以1000，导致实际触发时间远超出预期；同时未考虑用户活跃操作时的会话刷新场景。

修正后的实现代码 #

document.addEventListener("DOMContentLoaded", function() {           
    // 获取会话剩余有效期（转换为整数，避免字符串运算错误）
    var expiryTime = parseInt(`{{ request.session.get_expiry_age }}`);
    // 提前2分钟（120秒）弹窗，转换为毫秒
    var openModalDelay = (expiryTime - 120) * 1000; 
    // 会话到期后1秒关闭弹窗并跳转，确保会话已失效
    var closeAndRedirectDelay = expiryTime * 1000 + 1000;

    // 触发弹窗的定时器
    const modalTimer = setTimeout(function() {
        $('#sessionTimeoutModal').modal('show');
    }, openModalDelay);  

    // 关闭弹窗并跳转的定时器
    const redirectTimer = setTimeout(function() {
        $('#sessionTimeoutModal').modal('hide');
        window.location.href = "{% url 'login' %}";
    }, closeAndRedirectDelay);

    // 监听用户活跃操作（鼠标移动/按键），重置定时器
    function resetTimers() {
        clearTimeout(modalTimer);
        clearTimeout(redirectTimer);
        window.removeEventListener('mousemove', resetTimers);
        window.removeEventListener('keypress', resetTimers);
    }
    window.addEventListener('mousemove', resetTimers);
    window.addEventListener('keypress', resetTimers);
});

关键修正说明 #

1. 修复计时逻辑：第二个定时器直接使用会话总有效期计算延迟，避免重复转换毫秒的错误，确保跳转时机准确。
2. 添加用户活跃监听：如果用户在弹窗弹出前有操作，说明会话已被后端刷新，此时清除定时器，避免不必要的弹窗和跳转。
3. 类型转换：将后端返回的有效期字符串转为整数，防止字符串拼接导致的计时异常。

注意事项 #

• 确保后端模板变量{{ request.session.get_expiry_age }}返回正确的剩余秒数。
• 页面需正确引入Bootstrap的JS和CSS，保证模态框正常显示。
• 若需更高精度的会话同步，可通过AJAX定期请求后端接口校验会话状态，避免前端计时与后端实际会话时间不一致。

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