在React中隐藏API密钥

Question

我首先要说我遵循这里How do I hide API key in create-react-app?的所有建议，但没有一个起作用。我已经搜索了一个多小时，试图找到答案，但一无所获。以下是我的解释。

1. 我用create-react-app来支撑我的项目
2. 我正在使用Google Maps，尚未使用任何其他API
3. 我在项目的根目录中创建了一个.env文件
4. 在该文件中，我添加了REACT_APP_GOOGLE_MAPS_API_KEY = api key
5. 在我的组件文件Map.js中添加了const GM_API_KEY = ${process.env.REACT_APP_GOOGLE_MAPS_API_KEY};（刻度线在文件中此变量的周围，但不会在此处显示）
6. 在地图的网址中，我像这样"https://maps.googleapis.com/maps/api/js?key=GM_API_KEY&callback=initMap"
添加了密钥
7. 此外，在我的Map.js文件的顶部，我添加了一个console.log(GM_API_KEY); 以确保其正常工作。
8. 我导出了Map组件，然后将其导入了App.js
9. 我重新启动了服务器

页面加载后，我的密钥在控制台中输出，但是我仍然收到Google的错误消息，说我的API密钥无效。另外，如果我在页面加载后手动console.log(GM_API_KEY)，则会收到参考错误，指出GM_API_KEY is undefined

如果有人有任何建议或可以提供任何帮助，我将不胜感激！感谢您抽出宝贵时间来检查我的问题。

Answer 1

我对敏感数据的处理甚至没有将它们保存在.env中，我在项目根目录下打开终端并运行export API_KEY=sdf54vvetvf...，然后在您的应用程序内，您可以通过{{1 }} note ，每次从该会话中关闭终端时，都需要手动添加

Answer 2

尝试定义将api键保存在生命周期挂钩中的常量，例如componentWillMount（尽管此方法现在不安全），以确保在挂载组件时变量可用：

Error.stackTraceLimit = Infinity; require('core-js/es6'); require('core-js/es7/reflect'); require('zone.js/dist/zone'); require('zone.js/dist/long-stack-trace-zone'); require('zone.js/dist/proxy'); require('zone.js/dist/sync-test'); require('zone.js/dist/jasmine-patch'); require('zone.js/dist/async-test'); require('zone.js/dist/fake-async-test'); var appContext = require.context('../src', true, /\.spec\.ts/); appContext.keys().forEach(appContext); var testing = require('@angular/core/testing'); var browser = require('@angular/platform-browser-dynamic/testing'); testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

然后

componentWillMount() { const GM_API_KEY = ${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}; }