使用react-native-pure-jwt解码JWT遇报错求助

问题场景 #

在React Native项目中安装react-native-pure-jwt后，尝试两种导入方式解码JWT均报错：

• 按需导入import {decode} from "react-native-pure-jwt"，报错："cannot read property 'decode' of null"
• 整体导入import jwt from "react-native-pure-jwt"，报错：TypeError: Cannot read property 'decode' of undefined, js engine: hermes
  执行react-native link react-native-pure-jwt也无法解决问题。

解决方案 #

1. 优先替换为纯JS实现的JWT库（最稳定）

react-native-pure-jwt依赖原生模块，在Hermes引擎或高版本React Native中容易出现链接/适配问题。推荐使用纯JS库，无需原生配置，比如：

使用jose库（现代JWT标准库）

安装：

npm install jose

解码代码：

import { decodeJwt } from 'jose';

const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJKb2UifQ.ipevRNuRP6HflG8cFKnmUPtypruRC4fb1DWtoLL62SY";
const payload = decodeJwt(token);
console.log(payload); // 直接得到解码后的对象

使用jsonwebtoken库（经典选择）

安装：

npm install jsonwebtoken

解码代码：

import jwt from 'jsonwebtoken';

const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJKb2UifQ.ipevRNuRP6HflG8cFKnmUPtypruRC4fb1DWtoLL62SY";
const payload = jwt.decode(token, { complete: false }); // complete设为true可获取完整token结构
console.log(payload);

2. 若坚持使用react-native-pure-jwt，尝试以下排查步骤

• 卸载重装并清理依赖：

  npm uninstall react-native-pure-jwt
  rm -rf node_modules package-lock.json
  npm install
  

• 清除React Native缓存：

  npx react-native start --reset-cache
  

• 重新构建原生项目：
  • iOS：

    cd ios && pod install && cd ..
    npx react-native run-ios
    

  • Android：

    cd android && ./gradlew clean && cd ..
    npx react-native run-android
    

• 手动确认原生链接配置（针对RN 0.60以下版本，或自动链接失效情况）：
  • iOS：打开ios/[你的项目名].xcworkspace，检查Build Phases > Link Binary With Libraries中是否包含libRNReactNativePureJwt.a
  • Android：检查android/settings.gradle是否有如下配置：

    include ':react-native-pure-jwt'
    project(':react-native-pure-jwt').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pure-jwt/android')
    

    同时检查android/app/build.gradle的dependencies块是否包含：

    implementation project(':react-native-pure-jwt')
    

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