Reactjs前端如何存储JWT Secret？

Question

我是 JWT 的新手，不是 React 的新手，但对如何从前端解码 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

Answer 1

您可以将其存储在主要组件状态、Redux 存储、React 上下文、本地存储等中..

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

Answer 2

你不应该在客户端存储 JWT 秘密。

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

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

或者想不使用包解码的可以看.

Reactjs前端如何存储JWT Secret？

How to store JWT Secret in Reactjs front end?

node.js

express

jwt

reactjs

jwt-auth