在 React 中隐藏 API 密钥

Posted 2023-02-22

【中文标题】在 React 中隐藏 API 密钥

【英文标题】：Hiding the API key in React

【发布时间】：2021-04-30 11:25:33

【问题描述】：

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

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

在源文件夹中创建了一个 .env 文件（使用 .gitignore）

在 .env 中添加 REACT_APP_ACCESSTOKEN = pk.ffe1Ijo.......

在终端添加 npm install dotenv

添加到我们的 map.component 文件中 - 从“dotenv”导入 dotenv dotenv.config() const accessToken = process.env.REACT_APP_ACCESSTOKEN;

添加到 webpack.config.js -

外部：[“fs”]， 解决： 扩展名：['.js', '.jsx', '.ts', '.tsx'] ,

现在我们在 web 浏览器控制台中收到 fs 未定义的错误消息。或者没有找到 Acesstoken。

【参考方案1】：

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

但是，如果你真的需要：

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

否则，dotenv-webpack 可能是您可以尝试的。见其他SO question。

【讨论】：

谢谢，我们运行了 npm i dotenv-webpack 命令，然后修改了 webpack.config.js（如链接所示），它工作了。