在React中隐藏API密钥

时间:2018-10-05 15:28:48

标签: javascript reactjs google-maps create-react-app

我首先要说我遵循这里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. 添加了密钥
  8. 此外,在我的Map.js文件的顶部,我添加了一个console.log(GM_API_KEY); 以确保其正常工作。
  9. 我导出了Map组件,然后将其导入了App.js
  10. 我重新启动了服务器

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

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

2 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:3)

尝试定义将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}; }