如何在反应 js 应用程序中保护 security_access_key？答案

【问题标题】：how to secure security_access_key in react js application?如何在反应 js 应用程序中保护 security_access_key？
【发布时间】：2019-04-13 09:19:12
【问题描述】：

出于安全原因，我不想在我的应用程序中直接导入 security_access_key。

我尝试访问如下环境变量

第 1 步：

将 security_access_key 添加到 .env 文件中

 security_access_key=abc123

第 2 步：

在 App.js 中访问它

console.log(process.env.security_access_key)

但获得未定义的价值。

如果有人知道，请提出任何解决方案。

提前致谢

【问题讨论】：

【解决方案1】：

如果您使用的是 create react app，那么您可以在项目的根目录中使用 .env 文件。
在里面添加一个像 .env.development 这样的文件，添加这样的值

REACT_APP_SERVER_ENDPOINT=http://localhost:3000

确保添加 REACT_APP_ 作为前缀。在应用程序中，您可以访问它

process.env.REACT_APP_SERVER_ENDPOINT

【讨论】：

仍然得到未定义的值
将 process.env 作为 {}
@kalyani_jamunkar 你在使用 create react 应用吗？
是的，我正在使用 create react app
@kalyani_jamunkar 在添加 .env.development 中的值后是否重新启动它？你的 create-react-app 版本是什么？。

【解决方案2】：

4 个简单的步骤来让它工作

1) npm install dotenv --save

2) 接下来将以下行添加到您的应用中。

require('dotenv').config()

3) 然后在应用程序的根目录下创建一个 .env 文件，并将变量添加到其中。

//.env的内容

REACT_APP_API_KEY = 'my-secret-api-key'

4) 最后，将 .env 添加到您的 .gitignore 文件中，以便 Git 忽略它并且它永远不会出现在 GitHub 上。

注意：- 如果您使用“create-react-app”创建反应应用程序，则需要在 .env 文件中添加变量后重新启动应用程序，并在变量名称前使用“REACT_APP_”。

【讨论】：

【解决方案3】：

如果你使用 create react app 则使用 TRomesh 推荐的解决方案，添加 REACT_APP_params，这是 create react app https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables 推荐的方式。
如果您使用的是 Webpack，那么您可以使用 DefinePlugin 来访问该参数

//webpack.config.js 新的 webpack.DefinePlugin({ 'process.env.security_access_key': JSON.stringify(process.env.security_access_key), }),

然后你可以从你的 react 应用访问 process.env.security_access_key

【讨论】：