vue.js - 使用 Vue3 在哪里存储敏感的环境变量？

Question

根据 Vue 文档，我可以将环境变量存储在 .env 文件中并自动加载它们。这工作正常，但此页面表示不要在这些文件中存储任何敏感的 ENV 变量，因为它们与构建捆绑在一起。

WARNING

Do not store any secrets (such as private API keys) in your app!

Environment variables are embedded into the build, meaning anyone canview them by inspecting your app's files.

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

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

Answer 1

任何 secret 都应该只存储在您的服务器上。它永远不应该成为你的 Vue 应用程序源代码的一部分，无论你认为你如何隐藏或加密它。

一般来说，您应该让用户发送他们的用户名/密码，在服务器上创建一个 token (查看 JSON Web Tokens 以获得一种轻量级方法)，然后 (1) 将其设置为 HttpOnly cookie(javascript无法触摸)或将其存储在客户端的 localStorage 中，并将其设置为 axios 中的公共(public) header (使用 header :{ Authorization: 'Bearer ' } 是相当常见的。

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