JWT访问令牌有效性校验：代码异常问题排查

核心问题 #

你的代码存在两个关键错误，导致异常场景下仍会执行parseJwt：

• typeof判断逻辑错误：localStorage.getItem('access_token')在键不存在时返回的是null而非undefined，typeof null的结果是'object'，所以你的第一个条件typeof ... === 'undefined'永远不会触发，后续代码会直接执行parseJwt。
• 忽略localStorage存储特性：localStorage只能存储字符串，如果你尝试存入undefined，它会被自动转为字符串"undefined"，此时typeof返回'string'，同样不会触发你的第一个判断。

另外，代码未处理令牌格式不正确的场景，直接调用parseJwt会抛出异常；且多次重复调用localStorage.getItem和parseJwt，冗余且易引发错误。

修复后的代码 #

// Root.js
// 先确保parseJwt能处理格式错误，内部加入异常捕获
function parseJwt(token) {
  try {
    // 标准JWT解析逻辑：拆分payload部分解码
    return JSON.parse(atob(token.split('.')[1]));
  } catch (err) {
    // 格式错误时返回null
    return null;
  }
}

// 缓存令牌值，避免重复读取localStorage
const token = localStorage.getItem('access_token');
let curr_access_token_user = null;

// 依次处理所有异常场景
if (token && token !== 'undefined') {
  const decodedToken = parseJwt(token);
  // 验证令牌解析有效且未过期
  if (decodedToken && Date.now() < decodedToken.exp * 1000) {
    curr_access_token_user = decodedToken.username;
  }
}

修复说明 #

• 场景1（无access_token键）：token为null，直接跳过后续逻辑，curr_access_token_user保持null。
• 场景2（值为undefined）：localStorage中实际存储的是字符串"undefined"，通过token !== 'undefined'过滤，跳过后续逻辑。
• 场景3（格式不正确）：parseJwt内部捕获异常返回null，不会进入赋值逻辑。
• 场景4（令牌过期）：Date.now() >= decodedToken.exp * 1000时，不赋值，保持null。

内容的提问来源于stack exchange，提问作者user1933205