JWT 访问和刷新令牌由服务器生成后如何在前端进行管理？

Question

我学习了一些关于如何在 NestJS 中实现 JWT 身份验证的教程 （尤其是这个，还有 NestJS 网站上的那个）。我现在有一个 API 可以执行以下操作：

• 使用用户名注册用户
• 在数据库中存储哈希密码和哈希刷新令牌
• 登录时验证用户凭据并返回访问令牌和刷新令牌
• 使用未过期的刷新令牌刷新令牌

这个我很理解；这说得通。我的问题是在前端，登录后，我该如何处理这些令牌？

1. 我应该在哪里存储这些令牌，以便每次向 API 发出请求时都可以发送它们？我读过本地存储是一个坏主意。 HTTP cookies 听起来像是一个可行的方法。我的 API 在 HTTP 响应正文中发送令牌，我是否只需从那里获取它并将其存储在 cookie 中并在每个请求时访问它？

2. 如何处理访问令牌过期的情况？这是我的想法：在收到代币的时候，我会保存过期时间。每次发出请求时，我首先检查是否已过过期时间，如果已过，则向 API 发送刷新请求，获取令牌，然后使用新的访问令牌提交请求。如果刷新失败（如果刷新令牌已过期或用户已注销），则只需重定向到登录页面。

这是处理此问题的典型/推荐方法吗？我知道这些事情可以通过 Cognito 或 Auth0 等身份验证提供商更轻松、更安全地完成，并且我最终可能会在我更关心安全性的更严肃的项目中使用其中之一。但我只是想从基础上了解其典型流程。

PS。我正在 NextJS 上构建一个 React 项目，以防有任何与之相关的细节。