TypeScript中Auth Service出现Object is possibly 'null'类型错误求助

错误原因 #

1. localStorage.getItem('token')在未找到对应存储项时会返回null，直接调用token.split('.')会触发类型错误。
2. 即使token存在，若格式不符合JWT的三段式结构，token.split('.')[1]会返回undefined，传给btoa同样会触发"Object is possibly 'null'"提示。

修复方案 #

方案1：基础空值校验+异常捕获 #

const isTokenExpired = () => {
  const token = localStorage.getItem('token');
  // 校验token存在且符合JWT三段式格式
  if (!token || token.split('.').length !== 3) {
    return true; // 无有效token，判定为过期/无效
  }

  try {
    // 处理JWT的Base64URL编码转换
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const parsedPayload = JSON.parse(atob(base64));
    
    return parsedPayload.exp > Date.now() / 1000;
  } catch (err) {
    // 解析失败时判定为无效
    return true;
  }
}

方案2：使用可选链简化校验（ES2020+） #

如果项目支持ES2020及以上语法，可用可选链操作符减少冗余代码：

const isTokenExpired = () => {
  const token = localStorage.getItem('token');
  const base64Url = token?.split('.')[1];

  if (!base64Url) return true;

  try {
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const parsedPayload = JSON.parse(atob(base64));
    
    return parsedPayload.exp > Date.now() / 1000;
  } catch (err) {
    return true;
  }
}

关键提示 #

• JWT的payload采用Base64URL编码，和标准Base64存在字符差异（-替代+，_替代/），直接用atob可能解析失败，必须先做字符转换。
• 始终添加try/catch块，避免因payload格式错误导致函数抛出异常。

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