如何在 ReactJS 中隐藏你的 API 密钥？

在 ReactJS 中，你所编写的代码都是在客户端执行的，这意味着，代码中包含的 API 密钥是容易被恶意用户获取的。为了避免这种情况的发生，我们需要将 API 密钥隐藏起来。

有多种方法可以实现这个目的，本文介绍其中两种。

方法一：将 API 密钥存储在服务器端

将 API 密钥存储在服务器端，只在需要时发送请求到服务器获取数据，这是最安全的方法。你需要自己搭建一个服务器，以及 API 的后端。在客户端，发送请求到服务器获取数据即可，不需要再次在客户端使用 API 密钥。

方法二：使用环境变量

在客户端代码中，使用环境变量存储 API 密钥。ReactJS 项目中，可以使用 dotenv 库来实现这个功能。

首先，在命令行中安装 dotenv：

npm install dotenv

然后，在你的 ReactJS 项目中，新建一个 .env 文件，并在其中添加以下内容：

REACT_APP_API_KEY=your_api_key

这里的 REACT_APP_API_KEY 是一个环境变量名，your_api_key 是你的 API 密钥。

之后，在你的代码中调用你的 API 时，可以通过以下方式获取环境变量中的 API 密钥：

const apiKey = process.env.REACT_APP_API_KEY;

这样，就可以将 API 密钥隐藏在环境变量中，保证安全性。

注意，在使用 dotenv 时，需要在代码中通过 require 或 import 加载环境变量，如下所示：

require('dotenv').config();

或

import dotenv from 'dotenv';
dotenv.config();

总结

无论采用哪种方法，只要能够将 API 密钥隐藏在客户端之外，就能够提高程序的安全性。需要注意的是，所有的方法都不是绝对安全的，因此，必须谨慎考虑你的 API 密钥应该如何被保护。