应用程序进行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文件实现。