如何在JavaScript中实现会话超时前预警，确保确认后应用仍可用？

Hey there! Let's tackle this session timeout warning issue you're having. Sounds like your current setup is cutting off users even after they confirm the warning, which isn't ideal. Here's a solid, user-friendly approach to get the exact behavior you want:

The problem with your current setup is likely that when users confirm the warning, you aren't resetting the server-side session timeout. Session expiration is controlled by the backend, so frontend warnings alone won't keep the session alive. We need to:

1. Warn users 5 minutes before their 15-minute session expires
2. When users confirm the warning, send a quick request to the backend to refresh the session
3. Reset frontend timers so the warning cycle starts over
4. Only redirect users once the session has truly expired on the server

1. Frontend JavaScript (Handles Warnings and Timer Logic) #

This code manages timers, shows warnings, and refreshes the session when users confirm:

// Match the session timeout set in web.xml (15 minutes = 900000 ms)
const SESSION_TIMEOUT = 15 * 60 * 1000;
// Warn 5 minutes before timeout (10 minutes after session starts = 600000 ms)
const WARNING_DELAY = 10 * 60 * 1000;

let warningTimer;
let timeoutTimer;

// Initialize or reset all timers
function resetTimers() {
    // Clear existing timers to avoid duplicates
    clearTimeout(warningTimer);
    clearTimeout(timeoutTimer);

    // Schedule warning for 10 minutes from now
    warningTimer = setTimeout(showTimeoutWarning, WARNING_DELAY);
    // Schedule final timeout redirect for 15 minutes from now
    timeoutTimer = setTimeout(handleSessionExpired, SESSION_TIMEOUT);
}

// Show the "session about to expire" warning
function showTimeoutWarning() {
    const userConfirms = confirm("Your session will expire in 5 minutes. Do you want to continue using the app?");
    if (userConfirms) {
        // Refresh session and reset timers if user wants to stay
        refreshServerSession();
    }
    // If user cancels, let the timeout timer run its course
}

// Send a request to backend to refresh the session
function refreshServerSession() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/refresh-session", true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            alert("Session extended! You can keep using the app.");
            resetTimers();
        } else {
            // If request fails, session is already expired
            handleSessionExpired();
        }
    };
    xhr.onerror = handleSessionExpired;
    xhr.send();
}

// Handle true session expiration
function handleSessionExpired() {
    alert("Your session has expired. Please log in again.");
    window.location.href = "/login"; // Replace with your target page
}

// Reset timers whenever the user interacts with the page (clicks, types, scrolls)
document.addEventListener("click", resetTimers);
document.addEventListener("keydown", resetTimers);
document.addEventListener("scroll", resetTimers);

// Start timers when the page loads
window.addEventListener("load", resetTimers);

2. Backend Endpoint (Refreshes Session) #

You need a simple backend endpoint that, when accessed, tells the server to reset the session timeout. Here's a Java Servlet example (adjust for your framework like Spring MVC if needed):

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/refresh-session")
public class SessionRefreshServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // Accessing the existing session will automatically reset its timeout
        request.getSession(false); // Don't create a new session if none exists
        response.setStatus(HttpServletResponse.SC_OK);
    }
}

• Keep Timers in Sync: Make sure SESSION_TIMEOUT in JavaScript matches the <session-timeout> value in web.xml (both in minutes, converted to milliseconds for JS).
• User Interaction Reset: The code resets timers on clicks, keystrokes, and scrolls—this ensures active users never see unnecessary warnings.
• Error Handling: If the refresh request fails, we assume the session is already expired and redirect immediately.

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