如何在React中从LocalStorage的JWT里获取user_id并动态使用？

步骤1：从LocalStorage读取Refresh Token #

先从浏览器LocalStorage中取出存储的refresh token，注意确认存储时的键名（比如你可能存为refreshToken或refresh_token，根据实际情况调整）：

const refreshToken = localStorage.getItem('refreshToken');

步骤2：解析JWT的Payload部分 #

JWT由三段字符串通过.分隔，中间一段是经过Base64编码的用户信息Payload。取出这段内容并解码解析：

let userId = null;
if (refreshToken) {
  // 拆分JWT，获取中间的Payload部分
  const payloadBase64 = refreshToken.split('.')[1];
  // 补全Base64编码的填充字符（JWT可能省略末尾的=）
  const paddedPayload = payloadBase64.padEnd(payloadBase64.length + (4 - payloadBase64.length % 4) % 4, '=');
  // 解码并转换为JSON对象
  const payload = JSON.parse(atob(paddedPayload));
  
  // 提取user_id
  userId = payload.user_id;
  
  // 可选：校验token是否过期
  const currentTime = Date.now();
  if (payload.exp < currentTime) {
    console.error('Refresh Token已过期，请重新登录');
    // 这里可以添加跳转到登录页或刷新token的逻辑
    userId = null;
  }
}

步骤3：动态设置到FormData中 #

用解析得到的userId替换原来的硬编码值，同时处理未获取到userId的异常情况：

const formData = new FormData();
if (userId) {
  formData.append("user", userId);
} else {
  console.error('无法获取用户ID，请检查登录状态');
  // 可选：跳转到登录页面，比如使用react-router的navigate
  // navigate('/login');
}

注意事项 #

• 确保LocalStorage中存储token的键名和代码中的getItem参数一致，若不一致请修改对应值。
• 生产环境建议增加token有效性的校验逻辑，避免使用无效或过期的token。
• 不要在前端处理或存储敏感用户信息，本例中的user_id属于合法的用户标识，可安全使用。

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