将 jwt auth/refresh 令牌与反应应用程序集成的好方法？

Posted 2023-03-08

【中文标题】将 jwt auth/refresh 令牌与反应应用程序集成的好方法？

【英文标题】：good approach for integrating jwt auth/refresh token with react app?

【发布时间】：2020-07-11 11:37:00

【问题描述】：

我发现这个 YouTube 视频很好地介绍了 JWT 身份验证令牌和刷新令牌：

https://youtu.be/mbsmsi7l3r4

现在我正在尝试将此设计与 React 应用程序集成。我可以将 JWT 存储在我的应用上下文中，然后将其传递给 API 端点。每个端点都将包含一个身份验证挂钩，以使用提供的令牌验证身份验证。

我认为如果原始身份验证令牌在到期后 10 秒内，则身份验证挂钩可以生成并返回刷新令牌

但是使用这种 ^^^ 方法，我似乎需要将身份验证令牌或刷新令牌作为 API 端点响应对象的一部分返回，以便我的 React 应用程序能够轻松获取句柄到该刷新令牌并将其传递给下一个 API 端点调用

所以我只是想假设我的 React 应用程序和 Express API 之间的 JWT 集成的可能设计。我描述的方法有多普遍？有没有更好或更优雅的方法来做到这一点？

【参考方案1】：

当您的访问令牌过期时，刷新令牌用于获取访问令牌的新副本。两者都需要在客户端以某种方式持久化。您可以从 Auth0 中找到有用的信息here。

请注意，刷新令牌可以以几种形式实现。参考这个SO question。

我的 JWT 工作流程大致如下：

从授权服务器获取刷新令牌和访问令牌 使用访问令牌从资源服务器访问资源 访问令牌已过期，资源服务器拒绝访问并返回类似unauthorized 状态的内容 应用通知访问令牌过期，继续使用刷新令牌从授权服务器获取新的访问令牌 重复

您的身份验证服务器和资源服务器可能相同。

从 Auth0 中彻底读取 this。