如何使用 React 正确管理 JWT？答案

【问题标题】：How to manage JWT properly using React?如何使用 React 正确管理 JWT？
【发布时间】：2021-09-24 10:11:05
【问题描述】：

我正在构建一个具有很多功能的会员系统，如备忘录或帖子系统......等等，所以我认为使用 JWT 令牌更安全，所以我让我的 api 每次登录时都返回 jwt 令牌，如下所示

{
    "status": 200,
    "message": "",
    "data": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MGViYzI0MDRhNmVkNDU2NzUwOTk4YjEiLCJ1c2VybmFtZSI6ImpvaG4iLCJleHAiOjE2MjY5NTgwMzEuMjA3LCJpYXQiOjE2MjYzNTMyMzF9.3t_YzKPq4jk6UuIkzTgFaLoXD0Pq5ktmRFp7xg6dFYU"
}

它包含 userID 和 userName ，但问题是，每次我必须使用 userProfilePicture ，userFriend...等其他东西时，我都必须发出 API 请求，这样做真的没有意义

最终我管理它就像我使用 axio.interceptor 来验证并在我将我的数据分配给上下文状态之前，我使用这个令牌获取用户的所有数据并将数据分配给 state ，它不是以相同的方式返回所有没有 JWT 的用户数据？

在我看来JWT Token有点没用，谁能告诉我什么是真正有效的使用JWT Token的方法以及常见的管理方式是什么？

【问题讨论】：

我使用 jwt 进行授权，因此可以防止未经授权的人（例如未登录应用程序的人）访问他们不应该访问的数据

标签： reactjs jwt

【解决方案1】：

使用可以将您的令牌 JWT 保存在本地存储中...并在您调用 api 时在请求（或获取）的标头中调用它...

但不要忘记将过期的 JWT 令牌设置为一周（或一个月，或一年...由您决定）...

或者你可以设置配置，如果你的 JWT，如果你的令牌过期，它仍然会发送响应到你的应用程序......

【讨论】：

本地存储，原来如此，谢谢解答