前端如何处理token失效

前端处理token失效的方法包括：自动刷新token、检测并处理401状态码、用户重新登录、缓存和清理机制。自动刷新token是最常用的方法之一。

自动刷新token是指在token即将失效时，通过调用刷新token的API接口，获取新的token，从而保证用户的会话持续有效。这种方法不仅提升了用户体验，还能确保前端与后台的无缝对接。

一、自动刷新token

自动刷新token的核心在于：在token即将失效时，提前刷新token以避免失效带来的问题。通常情况下，token会有一个有效期，例如1小时。我们可以在前端设置一个定时器，在token即将到期时，自动调用刷新token的接口。

1.1 设置token有效期

首先，我们需要在后端生成token时，附带上有效期信息。比如在JWT中，我们可以通过exp字段来表示token的到期时间。前端在获取token后，需要解析这个字段，并计算出token的剩余有效期。

1.2 定时刷新token

在前端，可以使用setTimeout或setInterval来设置一个定时器。在token即将到期前几分钟（例如5分钟），自动调用刷新token的API接口，获取新的token，并更新存储的token。

function setTokenRefresh() {
    const token = getTokenFromStorage();
    const exp = decodeToken(token).exp;
    const currentTime = Math.floor(Date.now() / 1000);
    const timeToRefresh = (exp - currentTime - 300) * 1000; // 提前5分钟刷新
    setTimeout(() => {
        refreshToken();
    }, timeToRefresh);
}
function refreshToken() {
    // 调用刷新token的API接口
    fetch('/api/refresh-token', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${getTokenFromStorage()}`
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.token) {
            saveTokenToStorage(data.token);
            setTokenRefresh();
        }
    })
    .catch(error => {
        console.error('Error refreshing token:', error);
    });
}

二、检测并处理401状态码

当前端请求API接口时，如果token已经失效，服务器通常会返回401 Unauthorized状态码。前端需要检测这个状态码，并做出相应的处理。

2.1 拦截HTTP响应

可以使用拦截器（如Axios的拦截器）来统一处理所有HTTP响应。如果发现响应状态码为401，则执行重新登录或刷新token的逻辑。

axios.interceptors.response.use(
    response => response,
    error => {
        if (error.response.status === 401) {
            // 处理token失效
            handleTokenExpired();
        }
        return Promise.reject(error);
    }
);
function handleTokenExpired() {
    // 调用刷新token的逻辑或提示用户重新登录
    refreshToken()
    .then(newToken => {
        if (newToken) {
            saveTokenToStorage(newToken);
            // 重新发送之前失败的请求
        } else {
            // 跳转到登录页面
            redirectToLogin();
        }
    });
}

2.2 重新发送失败的请求

如果刷新token成功，可以重新发送之前失败的请求，以确保用户操作的连续性。可以在拦截器中存储失败的请求信息，当刷新token成功后，再次发送这些请求。

三、用户重新登录

当刷新token失败或token已经完全失效时，最直接的方法就是让用户重新登录。可以在前端弹出登录框，或者直接跳转到登录页面。

3.1 弹出登录框

在页面顶部或底部弹出一个登录框，提示用户重新输入用户名和密码。这种方式不会打断用户当前的操作，只需要用户输入新的凭证即可。

3.2 跳转到登录页面

直接将用户重定向到登录页面，要求用户重新登录。登录成功后，可以将用户重定向回之前的页面或操作。

function redirectToLogin() {
    window.location.href = '/login';
}

四、缓存和清理机制

为了确保token的安全和有效性，前端还需要实现一些缓存和清理机制。

4.1 本地存储token

将token存储在本地存储（如localStorage或sessionStorage）中，以便在页面刷新或重新打开时，仍然能够获取到token。

function saveTokenToStorage(token) {
    localStorage.setItem('authToken', token);
}
function getTokenFromStorage() {
    return localStorage.getItem('authToken');
}

4.2 清理过期token

当token失效或用户登出时，需要清理本地存储中的token，以避免后续请求继续使用无效的token。

function clearTokenFromStorage() {
    localStorage.removeItem('authToken');
}

五、使用项目管理系统

在实际项目开发中，使用项目管理系统可以帮助团队更高效地处理token管理问题。推荐使用研发项目管理系统PingCode，和通用项目协作软件Worktile，这两个系统都能提供全面的项目管理功能，包括任务跟踪、版本管理、权限控制等，有助于团队协作和项目的顺利进行。

5.1 PingCode

PingCode是一款专为研发团队设计的项目管理系统，支持从需求到上线的全流程管理。它提供了丰富的API接口和插件，可以方便地集成到前端项目中，帮助团队管理token的生成、刷新和失效处理。

5.2 Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目。它支持任务管理、时间追踪、文档共享等功能，能够帮助团队更好地协调和管理项目中的各种任务和问题，包括token管理。

通过以上方法，前端开发人员可以高效、灵活地处理token失效问题，确保用户体验和系统安全。同时，结合项目管理系统的使用，可以进一步提升团队协作和项目管理的效率。