在 Next.js 中存储管理 API 令牌的最佳方法是什么？感觉将它存储在客户端作为 http only cookie 是有风险的

如何解决在 Next.js 中存储管理 API 令牌的最佳方法是什么？感觉将它存储在客户端作为 http only cookie 是有风险的

我正在使用 next.js 和 sylius API 开展电子商务，并且使用 JWT 保护 API 管理路由。因此，为了获取产品（例如），我需要登录 API，获取令牌，然后使用令牌获取产品。能够针对 API 的每个新请求发送令牌的最常见方法是将其存储在仅限 HTTP 的 cookie 中。

由于页面是静态生成的，我觉得我不需要（也不想）向客户端公开 API 令牌。所以我想知道存储令牌的最佳方式？

这是我现在想到的不同选项：

• 将令牌存储为仅限 http 的 cookie 并在服务器端使用它（使用下一个 js API 页面的代理）以调用 sylius API。就像我说的，我不习惯将 API 令牌存储到客户端中，这对我来说似乎有风险，因为它会暴露给所有人，并且您可以使用该令牌访问管理 API。

• 配置API以防止token过期，并将其作为环境变量（.env.local）存储在下一个js应用中，这样就不会暴露给客户端，可以用于在生成静态页面时获取 api。 Next.Js 的官方电商主题好像就是用那个方法 (https://github.com/vercel/commerce/blob/f770ad7a91059a2ecfbb9de1bac111dfe7016124/framework/bigcommerce/api/index.ts#L82)

• 将令牌存储在下一个 js 结构中的某处，而不是作为环境变量（可能是配置文件？），以便在必要时可以替换它（如果令牌过期等）。

• 获取令牌并将其存储在反应状态中，因为它将仅用于生成所有静态页面一次。在每次构建时，API 将再次询问令牌，然后用于获取 API 以导出带有内容的静态页面。它不需要比构建步骤节省更多的时间。

对我来说，最后一个选项似乎更好，但我觉得我在那里遗漏了一些东西，我对下一个有点陌生，所以我不确定它是否是一个好的解决方案。

谢谢:)

解决方法

我从 reddit 用户（“supermaguireray”）那里得到了一个很好的答案，所以我把它作为答案发布在这里：

“首先，在任何会话管理机制中，正确的信息都需要存在于正确的域中，我的意思是您的客户端只能访问标识信息，而不能访问服务器中使用的数据，这些可以应用于服务器端会话，当存储在服务器上的用户数据的 ID 被发送到客户端（最好是加密的），或者在 JWT 中将加密的字符串发送到客户端（标识），并解密在服务器上（数据）。

话虽如此，您应该将 API 令牌发送到客户端的唯一原因是您需要直接从浏览器获取数据。存储为 httpOnly cookie 是最安全的方式。

如果您只需要将 cookie 获取数据到下一个后端，以呈现您的 SSG 或 ISR 页面，则无需向客户端发送 cookie。只需将令牌存储在您的服务器中。我会将它存储为 env 变量。使用 next.config.js->runtime-configuration。

或者，您可以保留令牌的到期日期，并存储凭据，甚至可以在 DynamoDB 或 FaunaDB 应用程序中。”