在React应用程序中隐藏密匙信息的教程

596 阅读1分钟

应用程序进行API调用,API调用需要秘密密钥。这些密钥不会被提交到代码库。

本教程涵盖了如何隐藏用create-react-app命令创建的React应用程序中的秘密密钥。

例如,如果你正在创建react twilio插件,你需要ACCOUNT_SID和AUTH_TOKEN,这是秘密密钥的细节。

例如,React应用程序是用create-react-app命令创建的。

首先使用npm命令安装最新的dotenv npm库

npm install dotenv

在应用程序根目录下创建.env文件

.env文件

ACCOUNT_SID=xxxxxxxxxx
AUTH_TOKEN=YYYYYYY

接下来,将.env文件添加到.gitignore ,该文件没有提交到git存储库中

.gitignore文件

.env
node_modules

一旦你创建了env文件并添加了api key细节,你就可以使用process.env文件来访问。process.env是访问环境变量的进程对象。

在 react 组件中,你可以访问 API 密钥,如下所示

console.log(process.env.ACCOUNT_SID);
console.log(process.env.AUTH_TOKEN);

用create-react-app命令隐藏api key信息。

在这里不需要dotenv npm依赖,因为create-react-app工具处理添加环境文件的方式不同。

假设应用程序的创建方式是create-react-app cli command

在项目的根目录下,创建一个.env文件

.env

REACT_APP_ACCOUNT_ID=123456
REACT_APP_AUTH_KEY=abckey

每个键都附加了REACT_APP符号,用于创建键,如果你不在键上添加REACT_APP,在react组件中访问时它会返回空。

使用process.env对象访问该键。

console.log(process.env.REACT_APP_ACCOUNT_ID)
console.log(process.env.REACT_APP_AUTH_KEY)

最后,你可以在环境变量中添加.gitignore。

结束语

隐藏API密钥的细节可以通过未提交到git仓库的.env文件实现。