如何在Reactjs前端存储JWT秘密？

Question

我是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

Answer 1

您可以将其存储在主组件状态、Redux存储、React上下文、localstorage等中。。

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

Answer 2

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

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

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

或者，如果您想在不使用软件包的情况下解码，您可以查看这里。