在React中隐藏API密钥

Question

我想首先说我遵循了这里的所有建议如何在create-react-app中隐藏API密钥？但他们都没有工作.我搜索了一个多小时试图找到答案,但没有.以下是我的解释.

1. 我曾经create-react-app支持我的项目
2. 我正在使用谷歌地图,尚未使用任何其他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...，然后在您的应用程序内部，您可以通过process.env.API_KEY 注释访问它，每次从该会话关闭终端时，您都需要手动添加它

Answer 2

尝试在像 componentWillMount 这样的生命周期钩子中定义保存 api key 的常量（尽管这个方法现在不安全），以确保该变量在组件挂载时可用：

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

然后

https://maps.googleapis.com/maps/api/js?key=${GM_API_KEY}&callback=initMap