校验JWT Access Token有效性的最佳实践

本文旨在提供一种健壮且可靠的方法，用于校验存储在localStorage中的JWT（JSON Web Token） Access Token的有效性。文章将深入探讨如何处理token不存在、值为undefined、格式错误以及过期等多种情况，并提供经过优化的JavaScript代码示例，帮助开发者避免常见的陷阱，确保应用程序的安全性和用户体验。

JWT Access Token有效性校验详解

在使用JWT（JSON Web Token）进行身份验证的Web应用中，校验Access Token的有效性至关重要。通常，Access Token会存储在客户端的localStorage中，以便在后续的请求中使用。然而，在实际应用中，我们需要考虑到各种异常情况，例如：

• Access Token在localStorage中不存在。
• Access Token的值为undefined。
• Access Token的格式不正确，无法解析。
• Access Token已过期。

直接使用typeof localStorage.getItem('access_token')来判断token是否存在或是否为undefined是不准确的。localStorage.getItem('access_token')在token不存在时返回null，在token值为undefined字符串时返回字符串"undefined"。typeof null返回"object"，typeof "undefined"返回"string"，因此无法区分这些情况。

正确的校验方法

以下代码展示了如何正确地校验Access Token的有效性：

let accessToken = localStorage.getItem('access_token');
let currentAccessTokenUser;

if (accessToken === null || accessToken === 'undefined') {
  currentAccessTokenUser = null;
} else {
  try {
    let decodedToken = parseJwt(accessToken);
    if (Date.now() >= decodedToken.exp * 1000) {
      currentAccessTokenUser = null; // Token expired
    } else {
      currentAccessTokenUser = decodedToken.username; // Valid token
    }
  } catch (error) {
    currentAccessTokenUser = null; // Token not in correct format
  }
}

代码解释：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

1. 获取Access Token： 首先，使用localStorage.getItem('access_token')获取Access Token的值。
2. 检查Token是否存在或为undefined： 检查accessToken是否为null或字符串"undefined"。如果是，则表示Token不存在或无效，将currentAccessTokenUser设置为null。
3. 解析Token并验证有效期： 如果Token存在，则尝试使用parseJwt函数解析Token。如果解析失败（例如，Token格式不正确），则会抛出异常，在catch块中将currentAccessTokenUser设置为null。如果解析成功，则检查Token是否已过期。如果已过期，则将currentAccessTokenUser设置为null。否则，表示Token有效，将currentAccessTokenUser设置为从Token中提取的用户名。

parseJwt 函数示例：

function parseJwt (token) {
  try {
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  } catch (error) {
    // Handle invalid token format
    console.error("Error parsing JWT:", error);
    return null; // Or throw the error if you prefer
  }
};

注意事项：

• 安全性： parseJwt函数应进行错误处理，以防止恶意Token导致应用崩溃。
• 性能： 频繁的Token校验可能会影响性能。可以考虑使用缓存或其他优化技术。
• 错误处理： 在生产环境中，应该记录错误日志，以便进行问题排查。

总结

本文提供了一种健壮且可靠的方法来校验存储在localStorage中的JWT Access Token的有效性。通过处理Token不存在、值为undefined、格式错误以及过期等多种情况，可以确保应用程序的安全性和用户体验。请务必在实际应用中进行充分的测试和错误处理，以确保代码的稳定性和可靠性。

以上就是校验JWT Access Token有效性的最佳实践的详细内容，更多请关注php中文网其它相关文章！