Reactjs 存储react redux应用程序的API密钥

我对react应用程序不熟悉，希望存储GooglePlacesAPI密钥。目前，我的index.html文件中有那些带有键的脚本，我应该将这些键放在哪里？

您可以在项目根目录中创建一个

.env

文件，并使用process.env加载键。例如，{KEY\u NAME}

如果您使用的是

create react app

，则会自动加载.env

in your .env file

REACT_APP_ACCESS_TOKEN='ae88b51e-cb87-4c9d-a3e3-7c2e2ffc3134'; //REACT_APP_{KEY_NAME} REACT_APP is mandatory

您还可以使用react访问react中的密钥

process.env.REACT_APP_ACCESS_TOKEN

---

如果您未使用create react应用程序，则可以通过链接集成dotenv包。理想情况下，您的密钥应该来自配置/环境文件。这将 为您提供了针对不同环境使用不同密钥的灵活性

创建一个名为.env.development.local/.env.production的文件，并在其中添加键，如“REACT\u APP\u GOOGLE\u PLACES\u API\u KEY”

现在，创建一个名为config.js的配置文件，并在其中添加以下行“export const GOOGLE\u PLACES\u API\u KEY=process.env.REACT\u APP\u GOOGLE\u PLACES\u API\u KEY”

现在，在组件中导入此配置文件并使用导出的值

---

通过这种方式，您可以仅从环境文件驱动密钥。

我建议您在npm上使用

googleapi

软件包：

通常敏感数据（API键）应该作为环境变量注入。 在宿主环境中或在构建期间设置它们。 由于您正在构建React应用程序，我猜您最有可能使用webpack。 Webpack允许您将它们注入到代码中： 您也可以使用这个方便的插件：它允许您使用

.env

文件

如果您使用的是

create react app

，则它已支持此功能。确保在环境变量前面加上

REACT\u APP

：

---

重要提示：因为这是一个客户端应用程序，所以您仍然要公开您的API凭据，没有办法解决这个问题。如果可能的话，确保在谷歌服务中将您的开发/产品环境列入白名单，或者运行您自己的代理服务器（这有点复杂，需要一些设置）。

我是否应该使用REACT_应用程序前缀？它是否需要像'something'这样的字符串？@FazalKarim yes，事件，如果您在

.env

中声明一个数字，它将为您提供字符串本身。我在.env文件中有我的密钥，并在index.html中使用此脚本，但得到invalidKeyMapError