Vue3 在哪里存储敏感的环境变量？

Question

根据 Vue 文档，我可以将环境变量存储在 .env 文件中，它们会自动加载。这很好用，但是这个页面说不要在这些文件中存储任何敏感的 ENV 变量，因为它们与构建捆绑在一起。

警告

不要在您的应用中存储任何秘密（例如私有 API 密钥）！

环境变量嵌入到构建中，这意味着任何人都可以 通过检查您应用的文件来查看它们。

https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

所以，如果我正在开发一个与 API 对话的 web 应用，该 API 需要发送一个 ID 和一个秘密才能获得令牌，我应该将这些 ENV 变量（CLIENT_ID、CLIENT_SECRET）存储在哪里？

在本地，我有一个 .env.local 文件，其中包含这些值，并且我还在 Netlify 环境变量中定义它们。

Answer 1

任何秘密都应该只存储在您的服务器上。无论您认为它隐藏或加密得多么好，它都不应该成为您的 Vue 应用程序源代码的一部分。

一般来说，您应该让用户发送他们的用户名/密码，在服务器上创建一个令牌（查看 JSON Web 令牌以获得轻量级方法），然后（1）将其设置为 HttpOnly cookie（一个 javascript无法触摸）或将其存储在客户端的localStorage中并将其设置为axios中的通用标头（使用标头：{ Authorization: 'Bearer'}相当普遍。

现在，客户端应该在每个请求中发送回该 JWT。因此，在您的服务器上，您可以检查 JWT 是否有效，如果有效，则发回请求的数据。