如何在 Reactjs 前端存储 JWT Secret？答案

【问题标题】：How to store JWT Secret in Reactjs front end?如何在 Reactjs 前端存储 JWT Secret？
【发布时间】：2020-04-11 19:18:02
【问题描述】：

我是 JWT 的新手，对反应并不陌生，但对如何从前端解码 JWT 感到非常困惑。我最初认为我可以将 JWT Secret 存储在 .env 文件中，但许多消息来源说这样做是一个非常糟糕的主意。我有后端设置，可以在您登录时向我发送 JWT。但是如果不将密钥也存储在前端，我将如何解码信息？

后端：

if(bcrypt.compareSync(ctx.params.password, hashed_db_password)) {
                            ctx.status = 200;
                            const payload = { data: tuples[0] };
                            const options = { expiresIn: '1h', issuer: 'testIssuer'};
                            const secret = process.env.JWT_SECRET;
                            const token = jwt.sign(payload, secret, options);
                            ctx.body = token;
                            return resolve();
}

我认为前端应该是这样的：

let data = JWT.verify(result.data, process.env.REACT_APP_JWT_SECRET, options);

我还阅读了很多关于后端应该进行验证的信息，但是这不会是一个巨大的安全风险来验证，然后发回不安全的原始用户信息吗？任何信息将不胜感激。

顺便说一句，我正在使用 Reactjs、Node.js、Express 和 MySql

【问题讨论】：

无需在前端验证令牌。而且你仍然可以解码令牌，payload只是一个base64url编码的json，你不需要秘密或密钥来解码。
谢谢刚刚从电脑上休息一下才发现？？？？

标签： node.js reactjs express jwt jwt-auth

【解决方案1】：

你可以将它存储在你的主要组件状态、Redux 存储、React Context、localstorage 等等。

您应该仅在身份验证成功时获取 JWT，并且您应该将它与每个请求一起发送到服务器，您不需要在前端解码它，您只需将编码值传递给服务器并解码它在后端的某个地方（某种中间件）

【讨论】：

如果我不需要在前端对其进行解码，我将如何获取它所持有的数据？我想我不小心使用了验证而不是解码...哎呀
@gad74 你的 JWT 用例是什么？
用于用户认证等。密码、ID、个人信息等。我猜由于每个字段中的所有数据都已加密，因此它仍然非常安全。就像密码和东西是使用 bcrypt 完成的一样
@gad74：密码根本不属于令牌。为什么需要令牌中的密码？使有效载荷尽可能短。
@gad74 你没有......当它通过一些req传递时，你在后端解码它。并检查信息（用户 ID？还有一些盐）

【解决方案2】：

您不应将 JWT 机密存储在客户端。

要解码令牌，您不需要 JWT 密钥。

您可以使用jwt-decode 包解码令牌。

或者如果你想在不使用包的情况下进行解码，可以查看here。

【讨论】：

在为我的任务寻找解决方案时，我发现了这个链接。有两个答案，它们完全相互矛盾。想知道哪个是“正确”的吗？
@HoangMinh 我们不应该将 jwt 机密暴露给客户端，它根本不安全。
@HoangMinh 你可能也会觉得这个问题很有趣stackoverflow.com/questions/27301557/…