页面登录一定时间无操作后自动退出登录

2023年8月22日吴代鹏 JavaScript PHP 前端

方法一：PHP + JS

1、PHP部分
在 login.php 文件中，当用户成功登录时，记录用户最后活动时间戳到会话中，如下所示：

1
2
3
4
5
// 登录成功，建立会话并保存登录状态和最后活动时间戳
session_start();
$_SESSION['loggedIn'] = true;
$_SESSION['username'] = $username;
$_SESSION['lastActivity'] = time(); // 记录登录时的时间戳

2、JS部分
在前端的页面中，使用 JavaScript 来检查用户的活动状态并定时检查是否超时。以下是一个基本的 JavaScript 代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 定义会话超时时间（以秒为单位）
const sessionTimeout = 1800; // 半小时（30分钟）

// 监听用户的活动事件，例如鼠标移动、键盘按键等
let timeout; // 用于存储定时器的引用

function resetSessionTimeout() {
    clearTimeout(timeout); // 重置定时器

    // 重新设置定时器，以半小时的时间作为会话超时时间
    timeout = setTimeout(logout, sessionTimeout * 1000);
}

// 当用户执行活动操作时（例如鼠标移动、键盘按键等），重置会话超时时间
window.addEventListener("mousemove", resetSessionTimeout);
window.addEventListener("keydown", resetSessionTimeout);

// 登出函数，用于在会话超时时执行
function logout() {
    // 清除会话数据并重定向到登录页面
    fetch('logout.php') // 创建一个用于注销的 PHP 页面
        .then(response => {
            // 清除前端会话数据
            window.location.href = 'login.html'; // 重定向到登录页面
        })
        .catch(error => console.error('Error:', error));
}

// 在页面加载时启动定时器
window.onload = resetSessionTimeout;

方法二：PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 登录成功，建立会话并保存登录状态和最后活动时间戳
session_start();
$_SESSION['loggedIn'] = true;
$_SESSION['username'] = $username;
$_SESSION['login_time'] = time();

// 在每个页面加载时检查超时
function checkSessionTimeout() {
    if (isset($_SESSION['login_time'])) {
        $timeout = 1800; // 30分钟的超时时间（以秒为单位）

        // 获取当前时间戳
        $current_time = time();

        // 检查是否超时
        if ($current_time - $_SESSION['login_time'] > $timeout) {
            // 用户已经超时，执行登出操作
            session_destroy(); // 或其他登出操作
            header('Location: login.html'); // 重定向到登录页面
            exit;
        } else {
            // 用户还在活动，更新最后活动时间戳
            $_SESSION['login_time'] = $current_time;
        }
    }
}

// 在每个需要检查超时的页面调用函数
checkSessionTimeout();