如何在React JS应用程序中确保security_access_key的安全？

Question

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

我尝试访问如下所示的环境变量

步骤1：

在.env文件中添加了security_access_key

 security_access_key=abc123

步骤2：

在App.js中访问

console.log(process.env.security_access_key)

但是获得价值是不确定的。

如果有人知道，建议任何解决方案。

预先感谢

Answer 1

如果您正在使用create react app，则可以在项目根目录中使用 .env 文件。
  在内部添加。env.development这样的文件，并在其中添加值

REACT_APP_SERVER_ENDPOINT=http://localhost:3000

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

process.env.REACT_APP_SERVER_ENDPOINT

Answer 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”创建React应用程序，则需要在.env文件中添加变量后重新启动应用程序，并在变量名称前使用“ REACT_APP_”。

Answer 3

• 如果您正在使用create react app，然后通过添加REACT_APP_params使用TRomesh推荐的解决方案，这是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