ReactJS中如何将JWT令牌转换为对象并提取用户id

JWT 结构为用 . 分隔的三段字符串，中间第二段为存储业务数据的 payload 段，采用 Base64Url 编码，无需依赖服务端即可在前端解码读取内容。 #

方案1：原生JS无依赖实现（适合快速开发、不想引入额外依赖的场景） #

实现步骤：

• 从 localStorage 读取已存储的 JWT 字符串
• 按 . 分割字符串，取下标为1的 payload 段
• 将 Base64Url 格式转换为标准 Base64 格式，补全长度补齐符
• 解码 Base64 内容为 JSON 字符串，转换为 JavaScript 对象
• 从解析后的对象中提取对应用户标识字段（你提供的示例JWT中用户id字段为id，如果你的业务实际字段为id-user替换对应字段名即可）

工具函数与使用代码：

/**
 * 前端解析JWT payload
 * @param {string} token JWT字符串
 * @returns {object|null} 解析后的payload对象
 */
function parseJwt(token) {
  if (!token) return null;
  try {
    // 提取payload段
    const base64UrlPayload = token.split('.')[1];
    // 转换Base64Url为标准Base64
    const base64 = base64UrlPayload.replace(/-/g, '+').replace(/_/g, '/');
    const padLength = base64.length % 4;
    const validBase64 = padLength ? base64 + '='.repeat(4 - padLength) : base64;
    // 解码处理UTF-8字符，转JSON对象
    const rawStr = atob(validBase64);
    const utf8Str = decodeURIComponent(rawStr.split('').map(char => {
      return '%' + ('00' + char.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
    return JSON.parse(utf8Str);
  } catch (e) {
    console.error('JWT格式非法', e);
    return null;
  }
}

// 业务中使用（React组件/普通JS逻辑都可调用）
// 替换为你实际存在localStorage里的JWT对应的key名
const jwtToken = localStorage.getItem('access_token');
const userPayload = parseJwt(jwtToken);
// 提取用户id，示例JWT中id值为4
const userId = userPayload?.id;

你提供的示例JWT解析后得到的payload内容如下：

{
  "id": 4,
  "email": "admin@gmail.com",
  "authorization": "owner",
  "iat": 1654949129,
  "exp": 1654952729
}

解码效果参考：
#

方案2：使用轻量第三方库（推荐生产环境使用） #

手写解析方法不会做格式合法性校验、过期判断，生产环境推荐使用经过社区验证的轻量库jwt-decode，整体包体积不到2KB，不会增加过多打包体积：

1. 安装依赖

npm install jwt-decode
# 如果你用yarn
yarn add jwt-decode

2. 业务中使用

import jwtDecode from 'jwt-decode';

const jwtToken = localStorage.getItem('access_token');
try {
  const userPayload = jwtDecode(jwtToken);
  const userId = userPayload.id;
  // 可额外判断token是否过期，exp为秒级时间戳，转毫秒级和当前时间对比
  const isExpired = userPayload.exp * 1000 < Date.now();
  if (isExpired) {
    // 过期处理：清空本地token、跳登录页等
  }
} catch (error) {
  // token格式非法时的错误处理
  console.error('令牌解析失败', error);
}

注意事项：JWT的payload段仅做Base64编码，是明文可读取的，绝对不要在JWT中存储密码等敏感信息；前端解析JWT得到的内容仅做页面展示、路由拦截用，所有接口的权限校验必须由后端完成，不能以前端的解析结果作为可信依据。

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