在 React 中隐藏 API 密钥

问题描述

我们有一个使用 API 密钥 (Accesstoken) 的应用程序。我们想在 .env 文件中隐藏 API 密钥。

我们已经完成了以下步骤。

1. 在源文件夹中创建了一个 .env 文件（带有 .gitignore）

2. 在 .env 中添加 REACT_APP_ACCEsstOKEN = pk.ffe1Ijo......

3. 在终端添加 npm install dotenv

4. 添加到我们的 map.component 文件中 - 从 'dotenv' 导入 dotenv dotenv.config() const accesstoken = process.env.REACT_APP_ACCEsstOKEN;

5. 添加到 webpack.config.js -

   外部：["fs"],解决： { 扩展名：['.js','.jsx','.ts','.tsx'] },

现在我们在 web 浏览器控制台中收到 fs 未定义的错误消息。或者未找到访问令牌。

解决方法

根据create-react-app documentation，除非您要创建玩具应用，否则在 React 应用中存储密钥不是一个好主意。

但是，如果你真的需要：

如果您使用 create-react-app，则无需安装单独的 dotenv 库，因为它是开箱即用的。

否则，您可能可以尝试使用 dotenv-webpack。查看其他SO question。