前端如何判断登录过期

前端判断登录过期的主要方法有：检查令牌有效期、使用刷新令牌机制、服务器响应状态码、轮询服务器状态、利用Web存储中的时间戳。其中，检查令牌有效期是最常见和有效的方法之一。通过在前端保存令牌的有效期时间戳，每次请求前检查当前时间是否超过该时间戳，从而判断令牌是否过期。这种方法不仅简单且对前端性能影响较小。

一、检查令牌有效期

检查令牌有效期是前端判断登录过期的一种常用方法。通常在用户登录成功后，服务器会返回一个包含有效期的令牌，前端保存这个令牌并在每次请求时携带它。前端可以通过解析这个令牌来判断其有效期。

1、解析令牌

令牌（如JWT）通常是基于JSON格式的，它包含了有效期（exp）字段。前端可以使用Base64解码工具解析JWT，然后检查exp字段与当前时间的对比来判断令牌是否过期。如果过期，则提示用户重新登录。

例如：

function isTokenExpired(token) {

    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
    const { exp } = JSON.parse(jsonPayload);
    return Date.now() >= exp * 1000;
}

2、自动检查

为了避免每次请求都手动检查，可以在API请求封装中添加自动检查令牌有效期的逻辑。例如，使用axios拦截器：

axios.interceptors.request.use(config => {

    const token = getToken();
    if (token && isTokenExpired(token)) {
        // 令牌过期，执行登出逻辑
        logout();
    } else {
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

通过自动检查，可以有效避免用户在操作过程中因为令牌过期导致的请求失败。

二、使用刷新令牌机制

刷新令牌机制（Refresh Token）是一种确保用户长时间登录状态的技术。与访问令牌（Access Token）不同，刷新令牌的有效期通常较长，并且只能用于获取新的访问令牌。

1、获取刷新令牌

当用户登录时，服务器会返回访问令牌和刷新令牌。前端保存两个令牌，并在访问令牌即将过期时使用刷新令牌获取新的访问令牌。

function refreshToken() {

    const refreshToken = getRefreshToken();
    axios.post('/auth/refresh', { refreshToken })
        .then(response => {
            saveToken(response.data.accessToken);
        })
        .catch(error => {
            // 刷新令牌失败，执行登出逻辑
            logout();
        });
}

2、自动刷新

为了使用户无感知地保持登录状态，可以在令牌即将过期时自动刷新。例如，设置一个定时器在令牌过期前几分钟自动刷新：

const token = getToken();

const { exp } = decodeToken(token);
const expirationTime = exp * 1000 - Date.now() - 5 * 60 * 1000; // 提前5分钟刷新
setTimeout(refreshToken, expirationTime);

这样，用户在正常使用过程中不会因为令牌过期而被迫重新登录，提高了用户体验。

三、服务器响应状态码

前端在发送请求时，可以通过检查服务器的响应状态码来判断登录是否过期。通常，服务器会返回401未授权状态码表示令牌无效或过期。

1、捕获401状态码

可以在请求封装中捕获401状态码，并执行相应的登出或刷新逻辑：

axios.interceptors.response.use(response => {

    return response;
}, error => {
    if (error.response.status === 401) {
        // 令牌无效或过期，执行登出逻辑
        logout();
    }
    return Promise.reject(error);
});

2、弹出登录提示

当捕获到401状态码时，可以弹出登录提示，引导用户重新登录：

function logout() {

    // 清除本地存储的令牌
    removeToken();
    // 弹出登录提示
    alert('登录已过期，请重新登录');
    // 跳转到登录页面
    window.location.href = '/login';
}

这种方法可以确保前端在令牌过期时及时响应，提高了系统的安全性。

四、轮询服务器状态

轮询服务器状态是一种主动检查令牌是否有效的方法。前端可以定期发送请求到服务器，检查令牌是否仍然有效。

1、定时轮询

设置一个定时器，每隔一定时间发送请求到服务器，检查令牌状态：

function checkTokenStatus() {

    axios.get('/auth/check')
        .then(response => {
            if (!response.data.valid) {
                // 令牌无效，执行登出逻辑
                logout();
            }
        })
        .catch(error => {
            // 网络错误或其他问题，执行登出逻辑
            logout();
        });
}
setInterval(checkTokenStatus, 15 * 60 * 1000); // 每15分钟检查一次

2、优化轮询频率

为了减少对服务器的压力，可以根据用户的操作频率调整轮询频率。例如，在用户活跃时频繁检查，在用户长时间没有操作时减少检查频率。

let lastActivityTime = Date.now();

document.addEventListener('mousemove', () => lastActivityTime = Date.now());
document.addEventListener('keydown', () => lastActivityTime = Date.now());
setInterval(() => {
    if (Date.now() - lastActivityTime < 5 * 60 * 1000) { // 用户5分钟内有操作
        checkTokenStatus();
    }
}, 15 * 60 * 1000);

这种方法可以在确保安全性的同时减少对服务器的压力。

五、利用Web存储中的时间戳

前端可以在登录成功时将令牌的有效期时间戳保存到Web存储（如localStorage或sessionStorage），并在每次请求前检查时间戳是否过期。

1、保存时间戳

在用户登录成功后，将令牌和有效期时间戳保存到localStorage：

function saveToken(token, expiresIn) {

    const expirationTime = Date.now() + expiresIn * 1000;
    localStorage.setItem('token', token);
    localStorage.setItem('tokenExpiration', expirationTime);
}

2、检查时间戳

在每次请求前，检查当前时间是否超过保存的时间戳：

function isTokenExpired() {

    const expirationTime = localStorage.getItem('tokenExpiration');
    return Date.now() >= expirationTime;
}

如果时间戳过期，则提示用户重新登录：

axios.interceptors.request.use(config => {

    if (isTokenExpired()) {
        // 令牌过期，执行登出逻辑
        logout();
    } else {
        const token = localStorage.getItem('token');
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

这种方法简单易行，可以有效管理令牌的有效期。

六、使用项目团队管理系统

在实际项目中，管理团队和协作任务是非常重要的。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提升团队的工作效率。

1、PingCode

PingCode是一款专注于研发项目管理的系统，提供从需求分析到上线的全流程管理。它支持敏捷开发、看板管理、任务跟踪等功能，可以帮助团队高效管理项目。

功能特点

• 需求管理：支持需求的创建、评审、跟踪，确保需求的准确实现。
• 任务管理：通过看板、列表等视图直观展示任务状态，方便团队协作。
• 缺陷管理：记录和跟踪缺陷，确保问题及时解决。
• 统计分析：提供丰富的报表和分析工具，帮助团队总结经验，优化流程。

使用PingCode可以提高项目管理的透明度和效率，确保项目按时按质完成。

2、Worktile

Worktile是一款通用项目协作软件，适用于各种类型的团队协作。它提供任务管理、日程安排、文件共享等功能，帮助团队更好地协同工作。

功能特点

• 任务管理：支持任务的创建、分配、跟踪，确保任务按时完成。
• 日程管理：通过日历视图直观展示团队成员的工作安排，避免冲突。
• 文件共享：支持文件的上传、下载和共享，方便团队成员获取资料。
• 沟通协作：提供即时通讯、评论等功能，促进团队成员之间的交流。

Worktile的多功能特性使其适用于各种类型的团队协作需求，提升团队的工作效率。

通过以上几种方法，前端可以有效判断登录是否过期，并采取相应的措施，确保用户的使用体验和系统的安全性。同时，使用合适的项目团队管理系统如PingCode和Worktile，可以进一步提升团队的工作效率和协作效果。

相关问答FAQs：

1. 登录过期是什么意思？
登录过期指的是用户在一段时间内没有进行任何操作，导致系统自动将其登录状态失效。

2. 如何判断前端登录是否过期？
前端可以通过以下几种方式来判断登录是否过期：

• 检查用户的token是否有效：在用户登录成功后，服务器会返回一个token给前端，前端可以定时发送请求到服务器，检查token的有效性。如果token过期或无效，说明登录已经过期。
• 监听用户操作：前端可以通过监听用户的鼠标移动、键盘输入等操作，来判断用户是否处于活跃状态。如果一段时间内没有任何操作，可以认为登录已过期。
• 与服务器进行心跳检测：前端可以定时发送一个心跳请求到服务器，如果服务器返回超时或错误，说明登录已过期。

3. 登录过期后应该如何处理？
一旦前端判断登录已过期，可以采取以下几种处理方式：

• 提示用户重新登录：前端可以弹出一个提示框，告知用户登录已过期，请重新登录。
• 跳转到登录页面：前端可以自动跳转到登录页面，让用户重新输入账号密码进行登录。
• 清除用户登录信息：前端可以清除本地存储的用户登录信息，确保用户再次访问时需要重新登录。

请注意，以上方法仅针对前端进行登录过期的判断和处理，后端也需要对登录状态进行有效性验证，以确保系统的安全性。