Angular 9 中的环境实现答案

【问题标题】：Env Implementation of in Angular 9Angular 9 中的环境实现
【发布时间】：2020-10-20 10:36:55
【问题描述】：

有没有办法在 Angular 中隐藏 API 凭据？

我尝试在我的项目中实现代码，但似乎无法正常工作，我不知道这是否与 Angular 9 兼容，我按照步骤操作，但仍然出现错误。

请查看下面的链接和我的示例代码， https://www.ninadsubba.in/blog/setup-dotenv-to-access-environment-variables-in-angular-9

environment.ts

.env

终端输出

我已经安装了以下软件包： npm install --save-dev yargs dotenv 和 npm install @types/node --save-dev 仍然出现这个错误，请帮我清楚地解决这个问题了解 dotenv 如何有助于隐藏 Angular 中的凭据，或者如果这只适用于 node.js，对不起，我是 Angular 的新手。提前致谢。

【问题讨论】：

dotenv 更像是常量的配置容器，它不会在运行时隐藏您的（敏感）数据。它广泛用于 Nodejs 将常量加载到 process.env 文件（但也有一些针对 ng-cli 的解决方法）。最好的方法是通过使用 API 端点来获取敏感数据。
您想完全隐藏什么样的凭据？如果它类似于 google maps API 密钥（用于显示地图）或前端需要与 3rd 方服务通信的任何其他静态密钥，那么您无法隐藏它。否则，如果它是用于服务器到服务器通信的密钥，请将该密钥添加到您的 API 中
假设我有一些端点，我希望它隐藏，就像我们在 environment.ts 中放置的一样，有没有办法在我们发布项目时不显示它？喜欢在浏览器中运行？
我们都知道浏览器有它的开发者工具，你可以在其中检查/检查你的代码，但我担心的一件事是我如何隐藏 webpack，这样他们就不能看看我的代码？

标签： angular dotenv

【解决方案1】：

您可以使用 webpack 中的设置来混淆代码以使其更难阅读（我相信它是默认完成的）。

The article you mentioned 非常具有误导性和危险性，暗示您可以在用户自己的计算机上“隐藏”用户凭据。引用文章：

“在谷歌上搜索有关为 Angular 设置环境变量的帮助是一场噩梦；”

这是有充分理由的！！

任何东西你给客户，他们都可以阅读。你不能隐藏它。

这意味着如果您需要一个 api 密钥来访问您的 api，那么他们会看到这个。

请记住，如果您需要与您的 api 通信，您将发送一个带有授权标头的 http 请求，对于使用您的 Angular 应用程序的每个人，这些将始终以纯文本形式显示在网络选项卡中.

一个潜在的解决方案是改变您的身份验证方式。无需使用密钥，而是根据您的 api 对用户进行身份验证（一种备受推崇的做法是使用 OAuth）这是一个很好的package for angular oauth。这允许用户发送用户名/密码组合（或使用第三方提供商）以将其交换为令牌，然后他们可以与您的服务器来回发送以验证他们的 api 请求。您的服务器应始终在收到请求时验证此令牌的完整性。 Firebase 也是处理身份验证的常用资源，因此您不必这样做。

【讨论】：