使用 C# 后端在 React 标头中显示 JWT 令牌中的用户名

Question

我想在 Header 组件中正确显示用户名。但是，我有时在使用 jwtDecode 解码令牌时遇到错误，或者 setUserName 状态未正确更新。 我是否需要从后端对令牌进行额外验证，或者我是否在前端错误地处理了令牌？

从 JWT 令牌中提取用户名并将其显示在 Header 组件中的正确方法是什么？ 如何改进前端和后端的代码？ 我还想确保我的实现中不存在安全漏洞。

Answer 1

也许您可以考虑创建一个端点来获取项目用户的详细信息。

以下是步骤

后端步骤

1. 在 C# 后端创建端点
2. 从令牌中的信息找到用户（我不知道你在令牌中添加了哪些详细信息）
3. 从数据库中获取用户详细信息
4. 创建 DTO 以将合适的数据发送到您的 React 应用程序

React 应用程序步骤

5. 无论您在哪里阅读，都请随身携带令牌
6. 使用您的令牌向您的端点发送请求
7. 接受您的回复并在标题中显示用户名。

您还可以将用户数据保存在主要提供商中，以便您可以在应用程序内的任何位置进行访问。

希望这有帮助！