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

API（应用程序编程接口）密钥是用于向 API 验证用户、开发人员或调用程序的唯一标识符。但是，它们通常用于使用 API 而非人类用户对项目进行身份验证。

而且在多次使用在线服务时，这些密钥会落入坏人之手，这对原始所有者来说是非常危险的。因此，保持 API 密钥的安全对于防止其落入错误的位置非常重要。

使用 ReactJS 时保护 API 密钥的最常见做法之一是使用env变量隐藏 API 密钥。在根目录中创建一个.env文件，并使用前缀REACT_APP创建一个env变量。例如，如下图所示：

REACT_APP_KEY = hello_world

注意：声明应该是准确的，中间没有空格。

现在，您可以通过将文件导入 App.js 文件来使用process.env对象的密钥。并且在将代码推送到 GitHub 或 Heroku 之前，删除.env文件并使用平台的密钥管理系统。

确保 API 密钥安全的步骤：

1. 创建 .env 文件：只需在 React 项目的根目录中创建一个名为.env的文件，如下所示：
   
2. 在 .env 文件中创建环境变量：使用前缀REACT_APP，创建您自己的环境变量并分配键，如下所示：

   文件名：.env

   REACT_APP_API_KEY = Your_api_key
   
   
   // Example
   REACT_APP_API_KEY = 6341454121

   注意：确保中间不要使用任何空格，因为这可能会导致错误。

3. 将 .env 文件添加到您的 .gitignore 文件中：这可以防止 Github 将.env文件推送到远程存储库。避免将您的 API 密钥推送到公共存储库中。
   文件名：.gitignore

   # API keys
   .env
   
   # Bower dependency directory (https://bower.io/)
   bower_components
   
   # node-waf configuration
   .lock-wscript
   ...

4. 访问 API 密钥：可以使用process.env对象轻松访问 API 密钥。只需简单地将文件导入主文件并使用process.env.your_key_name 访问它。

   文件名：App.js

   import React, { Component } from 'react';
   import './App.css';
   
   // Accessing your defined KEYS in .env file
   console.log(process.env.REACT_API_KEY)
   
   // Rest of your program
   function App()
   { ... }

现在，您可以使用在线服务器来推送您的代码，而不必担心您的密钥会被公开。