前端如何验证token是否过期

前端如何验证token是否过期

在前端开发中，token验证是保障用户身份安全的重要环节。本文将详细介绍几种常见的token过期验证方法，包括本地存储有效期检查、服务器端验证以及借助JWT的过期时间字段。同时，文章还提供了具体的实现步骤和代码示例，帮助开发者更好地理解和应用这些技术。

前端验证token是否过期的方法包括本地存储有效期检查、服务器端验证、借助JWT的过期时间字段。其中，本地存储有效期检查是一种常见的方法，具体实现包括在token生成时附带一个有效期字段（如 exp ），前端每次请求时先检查当前时间是否超过该时间，如果超过则认为token已过期，进行相应处理。这种方法操作简单且效率高，但安全性较低，因为前端的时间戳容易被篡改。

一、理解Token的工作原理

Token是一种用于身份验证的字符串，通常由服务器生成并发送到客户端，客户端在后续请求中附带该token，以证明其身份。Token可以是简单的随机字符串，也可以是更加复杂的JWT（JSON Web Token），后者包含了更多的信息和安全机制。

1、Token的基本结构

一个典型的JWT由三个部分组成：头部（Header）、载荷（Payload）、签名（Signature）。头部包含了算法类型和Token类型，载荷包含了实际的声明信息（如用户ID、过期时间），签名则是对前两部分进行加密签名，确保Token的完整性和真实性。

2、Token的生成与验证

服务器在用户登录或注册成功后生成Token，并将其发送给客户端。客户端在每次请求时将Token附带在请求头中（通常是 Authorization 字段），服务器接收到请求后验证Token的有效性，包括签名验证和过期时间检查。如果Token无效或过期，服务器会返回相应的错误信息，客户端则需要处理这些错误。

二、本地存储有效期检查

本地存储有效期检查是最简单的Token过期验证方法，主要依赖于Token中的过期时间字段（如JWT中的 exp ）。这种方法的核心思路是：在每次请求前，先检查当前时间是否超过Token的过期时间，如果超过则认为Token已过期。

1、实现步骤

• 解析Token：将Token解析出来，获取其中的过期时间字段。
• 检查过期时间：获取当前时间，并与Token中的过期时间进行比较。
• 处理过期Token：如果Token已过期，清除本地存储的Token，并引导用户重新登录。

2、代码示例

function isTokenExpired(token) {
  try {
    const payload = JSON.parse(atob(token.split('.')[1]));
    const currentTime = Math.floor(Date.now() / 1000);
    return payload.exp < currentTime;
  } catch (e) {
    console.error('Invalid token format', e);
    return true;
  }
}
// 使用示例
const token = localStorage.getItem('authToken');
if (isTokenExpired(token)) {
  // 处理过期Token
  localStorage.removeItem('authToken');
  alert('Token已过期，请重新登录');
  window.location.href = '/login';
}

三、服务器端验证

服务器端验证是最安全的Token验证方法，因为它避免了客户端时间戳被篡改的风险。每次请求时，服务器都会对Token进行验证，包括签名验证和过期时间检查。如果Token无效或过期，服务器会返回相应的错误信息，客户端则需要根据错误信息进行处理。

1、实现步骤

• 发送请求：客户端在每次请求时将Token附带在请求头中。
• 服务器验证：服务器接收到请求后，解析Token并进行签名验证和过期时间检查。
• 处理响应：如果Token无效或过期，服务器会返回相应的错误信息，客户端则需要根据错误信息进行处理。

2、代码示例

客户端代码：

async function fetchData(url) {
  const token = localStorage.getItem('authToken');
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
  if (response.status === 401) {
    // 处理过期Token
    localStorage.removeItem('authToken');
    alert('Token已过期，请重新登录');
    window.location.href = '/login';
  }
  return response.json();
}
// 使用示例
fetchData('/api/data')
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

服务器代码（以Node.js为例）：

const jwt = require('jsonwebtoken');

function verifyToken(req, res, next) {
  const token = req.headers['authorization'].split(' ')[1];
  if (!token) {
    return res.status(401).send('Access Denied: No Token Provided');
  }
  try {
    const verified = jwt.verify(token, process.env.TOKEN_SECRET);
    req.user = verified;
    next();
  } catch (err) {
    res.status(401).send('Invalid Token');
  }
}
// 使用示例
app.get('/api/data', verifyToken, (req, res) => {
  res.json({ data: 'protected data' });
});

四、借助JWT的过期时间字段

JWT（JSON Web Token）是一种常见的Token格式，它包含了很多有用的信息，包括过期时间字段（ exp ）。借助JWT的 exp 字段，前端可以方便地检查Token是否过期。

1、解析JWT

JWT由三个部分组成：头部、载荷、签名。载荷部分包含了实际的声明信息，包括过期时间（ exp ）字段。前端可以通过解析JWT，获取其中的 exp 字段，并与当前时间进行比较。

2、代码示例

function isJWTExpired(token) {
  try {
    const payload = JSON.parse(atob(token.split('.')[1]));
    const currentTime = Math.floor(Date.now() / 1000);
    return payload.exp < currentTime;
  } catch (e) {
    console.error('Invalid JWT format', e);
    return true;
  }
}
// 使用示例
const jwtToken = localStorage.getItem('jwtToken');
if (isJWTExpired(jwtToken)) {
  // 处理过期JWT
  localStorage.removeItem('jwtToken');
  alert('JWT已过期，请重新登录');
  window.location.href = '/login';
}

五、自动刷新Token

在实际应用中，为了提升用户体验，可以实现自动刷新Token的机制。当Token即将过期时，前端可以自动发送请求到服务器，获取新的Token并更新本地存储。这样用户无需频繁重新登录。

1、实现步骤

• 设置刷新阈值：定义一个Token刷新阈值，当Token剩余有效时间小于该阈值时，触发刷新操作。
• 发送刷新请求：前端在每次请求前，检查Token剩余有效时间，如果小于刷新阈值，则发送刷新请求到服务器，获取新的Token。
• 更新本地存储：将新的Token更新到本地存储中，并继续后续操作。

2、代码示例

async function refreshToken() {
  const response = await fetch('/api/refresh-token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      token: localStorage.getItem('authToken')
    })
  });
  const data = await response.json();
  if (response.ok) {
    localStorage.setItem('authToken', data.newToken);
  } else {
    alert('Token刷新失败，请重新登录');
    window.location.href = '/login';
  }
}
function isTokenNearExpiry(token, threshold = 300) { // 5分钟阈值
  try {
    const payload = JSON.parse(atob(token.split('.')[1]));
    const currentTime = Math.floor(Date.now() / 1000);
    return (payload.exp - currentTime) < threshold;
  } catch (e) {
    console.error('Invalid token format', e);
    return true;
  }
}
// 使用示例
const token = localStorage.getItem('authToken');
if (isTokenNearExpiry(token)) {
  refreshToken().then(() => {
    // 刷新成功后继续后续操作
    fetchData('/api/data')
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
  });
}

六、总结

前端验证Token是否过期的方法有多种，包括本地存储有效期检查、服务器端验证、借助JWT的过期时间字段等。每种方法都有其优缺点，实际应用中可以根据具体需求选择合适的方法。为了提升用户体验，可以实现自动刷新Token的机制。此外，在团队协作和项目管理中，推荐使用PingCode和Worktile，它们都支持Token验证机制，帮助团队更安全、高效地管理项目和协作。