Env在Angular 9中的实现

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

我试图在我的项目中实现该代码，但似乎无法正常工作， 我不知道这是否与angular 9兼容，我遵循了这些步骤，但仍然得到了一个错误

请参见下面的链接和我的示例代码，

环境。ts

.env

终端输出

我已经安装了以下软件包：

---

npm安装--save dev yargs dotenv和npm install@types/node--save dev仍然出现此错误，请帮助我解决此问题，以清楚地了解dotenv在angular中隐藏凭据是如何有用的，或者如果这仅适用于node.js，对不起，伙计们，我对angular非常陌生。提前感谢。

您可以使用webpack中的设置对代码进行模糊处理，使其更难阅读（我相信这是默认情况下完成的）

这是非常具有误导性和危险性的，并且暗示您可以在用户自己的计算机上对用户“隐藏”凭据。引用这篇文章：

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

这是一个很好的理由

你给客户的任何东西都可以被客户阅读。你不能隐藏它

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

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

一个潜在的解决方案是更改您的身份验证方式。不要使用密钥，而是根据api对用户进行身份验证（一种广受尊重的做法是使用OAuth）

---

这是一个好主意。这允许用户发送用户名/密码组合（或使用第三方提供商）以将其交换为令牌，然后用户可以通过服务器来回发送该令牌来验证其api请求。服务器在接收请求时应始终验证此令牌的完整性。也是处理身份验证的常用资源，因此您不必这样做。

dotenv

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