如何在React中使用react-jwt从JWT令牌提取指定值

你可以直接访问解码后token对象的userId属性，再将其存入localStorage。同时建议增加一些异常判断，避免token不存在或解码失败时出现报错，修改后的代码如下：

import { useJwt } from "react-jwt";

export function JWTDecode() {
  const token = localStorage.getItem("token");
  
  // 先检查token是否存在
  if (!token) {
    console.log("未获取到token");
    return;
  }

  const { decodedToken } = useJwt(token);
  
  // 确认解码结果中存在userId后再存入
  if (decodedToken?.userId) {
    localStorage.setItem("userId", decodedToken.userId);
    console.log("userId已成功存入localStorage:", decodedToken.userId);
  } else {
    console.log("解码后的token中不包含userId字段");
  }
}

关键说明： #

• 移除了async修饰符：useJwt是同步方法，不需要异步声明
• 增加token存在性校验：避免传入null给useJwt引发异常
• 使用可选链?.访问userId：防止decodedToken为undefined或null时出现类型错误
• 条件存入逻辑：仅当userId有效时执行存储操作，避免存入无效值

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