本文旨在提供一种健壮且可靠的方法，用于校验存储在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
}
}代码解释：
- 获取Access Token： 首先，使用localStorage.getItem('access_token')获取Access Token的值。
- 检查Token是否存在或为undefined： 检查accessToken是否为null或字符串"undefined"。如果是，则表示Token不存在或无效，将currentAccessTokenUser设置为null。
- 解析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、格式错误以及过期等多种情况，可以确保应用程序的安全性和用户体验。请务必在实际应用中进行充分的测试和错误处理，以确保代码的稳定性和可靠性。
