使用 Next.js 时可以将 jwt 令牌存储在本地存储中吗？

Question

我们希望在我们的应用程序中使用 Next.js，但我们将主要使用客户端渲染来获取数据。该 API 是我们将要调用的外部 API。只有主页将使用服务器端渲染。核心 API 需要登录才能访问仪表板，并且仪表板内容是特定于用户的。因此，我们想在 next.js 中使用客户端数据获取。JWT 在外部 API 中用于授予用户授权，用户的角色以及其他用户的详细信息存储在 JWT 访问令牌中。我们是 Nextjs 的新手，想知道如何进行此操作。我们需要每个用户在仪表板内发出 API 请求时发送其访问令牌作为其请求的一部分。我们是否可以将此访问令牌存储在其本地存储中，并在发出 API 请求时将其传递给标头承载者？

Answer 1

是的你可以。请求登录后，API返回JWT后，您可以调用localstorage来设置item。然后，在发出客户端请求时，您将调用 localstorage 来获取 item，然后将其传递到请求的标头中。请记住，您需要管理过期时间。

另一种方法是在登录时让 API 返回一个用于设置 cookie 的标头，该 cookie 将 JWT 存储在 cookie 中。然后，当发出请求（在同一主机上授予）时，如果您设置标头Access-Control-Allow-Credentials，它将自动传递 cookie

就我个人而言，我会选择 Cookie，因为如果将它们设置为 HTTP-Only，将会提高安全性。它还具有过期时间的好处，因此当 cookie 不再有效时，它会被清除，并且用户可以关闭页面，然后重新打开并仍然登录。

希望这可以帮助。