无法将 jsonwebtoken 与最新版本的反应一起使用答案

【问题标题】：cant use jsonwebtoken with latest version of react无法将 jsonwebtoken 与最新版本的反应一起使用
【发布时间】：2023-04-01 16:20:01
【问题描述】：

TL:DR：将jsonwebtoken 替换为jwt-decode

我在将现有的 React 应用升级到最新版本时遇到了一些问题。每次我都会收到以下错误

Can't resolve 'buffer' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

Can't resolve 'stream' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

Can't resolve 'util' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

Can't resolve 'crypto' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

我可以通过安装 buffer stream 和 util 包来摆脱除加密之外的所有这些。
我尝试安装crypto、crypto-browserify 和crypto-js。

我确实发现我可以通过从项目中删除 jsonwebtoken 来使其工作。但在那之后它不再完全正常工作，因为它需要用户身份验证。

为了测试，我创建了一个全新的 create-react-app 项目。它开箱即用。但是一旦我安装并导入jsonwebtoken，我就会再次得到完全相同的错误。这意味着即使在一个完全干净的项目中，jsonwebtoken 也不能使用。

有没有办法解决这个问题？因为我想升级我的项目并使用jsonwebtoken。

【问题讨论】：

你说的是这个包吗？ www.npmjs.com/package/jsonwebtoken 是node js的一个包。你在 React 应用程序中有什么用？您是否在 react 中签名和验证令牌？
是的，就是这个包，我只是用它来解码来自服务器的令牌

标签： reactjs npm jwt

【解决方案1】：

jsonwebtoken 是一个 Node.js 模块，您之前在 react 应用程序中使用它依赖于 Node.js 标准模块的 polyfill。这很可能 a) 依赖于不是 maintained anymore 的慢速 js 加密，并且与 Node 的加密缺乏功能对等，并且 b) 大大增加了 js 包的大小。更新 react 可能意味着更新 webpack，它不再默认使用有问题的加密 polyfill。

最好依赖为浏览器或“通用”制作的模块，您可以在“JavaScript”下jwt.io 列出的模块中找到这些模块。在那里列出的那些中，jose 使用纯可用的 Web API。

【讨论】：

谢谢，虽然我确实使用了 jwt-decode，因为 jose seams 无法解码 jwt 令牌并且 jwt-decode 没有与 jsonwebtoken 相同的问题
那么您必须知道，在大多数情况下，不建议仅解码令牌而不首先验证其签名（jose 所做的）。 jose 故意忽略了这个功能，因为它很容易被滥用，而且它也像你自己调用 JSON.parse(new TextDecoder().decode(jose.base64url.decode(jwt.split('.')[1]))) 一样简单。
我只是在前端使用它来找出刚刚登录的用户的 id，这样我就可以从 API 中获取他的信息。基本上在登录后，您会从包含您的用户 ID 的服务器获取您的 jwt。您仍然可以像往常一样使用它来验证您的请求，并且它显然总是在后端正确验证
当然，随便。但是，鉴于 API 可以在验证后将其从令牌中提取出来，首先在 API 中要求用户 ID 有什么意义……不过，很高兴我能提供帮助。