在代码中隐藏 API 密钥

假设你在 React App 中使用 fetch 方法从 API 获取信息，并使用你的 API 密钥连接到该 API。该密钥是私有的，不应该在你的代码之外可见。你该如何实现这一点，同时又能保证代码正常运行呢？
以下是我总结的一些对我有用的方法。我花了一段时间才弄清楚，所以我想分享一下，作为个人笔记，也希望能帮助到其他遇到同样问题的人。

以下是我遵循的步骤：

1-在终端中写入npm install dotenv （我使用 VSC 中的终端）。

2-在项目的根文件夹中创建一个.env文件（这意味着在src文件夹之外）。

3-此 .env 文件将包含需要隐藏的环境变量。由于我使用的是 React App，因此这些变量必须以REACT_APP_开头。在我的例子中，我的变量名为REACT_APP_API_KEY=numberOfYourAPIKey。

4-转到根文件夹中的 .gitignore 文件，并确保.env已添加到不会进入 GitHub 的文件列表中。

5-转到你的 App.js 文件，在“导入”列表顶部（声明 App 函数之前），声明一个变量来调用 config 函数。我写的是const dotenv = require('dotenv').config()（你可以使用自己喜欢的变量名）。

6-转到任何使用此 API 密钥的组件，并在该组件的 js 文件中声明一个变量，该变量将包含来自 .env 文件的 API 密钥。我写的是const api_key = process.env.REACT_APP_API_KEY。这是您将在 fetch 中使用的变量。例如，fetch( https://api.example.org/data/api_key=${api_key})
示例中的第一个“api_key”由 API URL 提供，大括号内的是我的变量“api_key”的名称。

7-您现在可以将您的项目上传到 GitHub，并且您的 API 密钥将不可见。

8-就我而言，我将我的 GitHub 项目导入 zeit.co（现为 vercel.com）平台，从而将项目部署到该平台。导入后，您将在 vercel.com 中看到三个选项卡：概览、部署和设置。在“设置”中，您可以在“环境变量”下找到声明变量的选项。您应该在其中使用您在 .env 文件中使用的变量名称 (REACT_APP_API_KEY)，然后将变量的实际值（您的 API 密钥）复制粘贴到变量名称旁边的字段框中，其中显示“值（将被加密）”。

您的代码应该可以正常工作，就像实际的 API 密钥仍然显示在代码中一样，只是现在它将隐藏在您的本地环境之外。希望对您有所帮助！