在Angular 4中使用Base64编码

Question

我希望使用Base64编码将用户名和密码发送到服务器。

我发现我可以使用npm导入以下模块：

    npm install --save angular-base64

我已检查过，在我的项目文件夹中创建了以下文件夹：node_modules\angular-base64

在我的component.js文件中，我尝试使用以下任意一行代码导入该组件：

    import 'angular-base64/angular-base64'; 

它并没有抱怨导入问题，但是当我尝试使用以下代码时出现了错误:

    headers.append('Authorization', 'Basic ' + base64.encode('username:temppass'));

它说：“找不到base64”。

- Naveed Kamran

---

如果您因为安全问题而这样做，那么您已经失败了。在处理机密信息时，请使用https（TLS、SSL等）。 - stefan bachert

@stefanbachert 仍然需要发送加密密码，因为服务器端代码需要它。 - Naveed Kamran

使用 angular-base64 库时，请确保在前面加上美元符号 $，例如 $base64.encode('username:temppass')。 - georgeawg

可能是在Angular（2+）中对字符串进行Base64编码和解码的重复问题。 - JayChase

Answer 1

您并不真正需要外部库来实现此目的。

WindowOrWorkerGlobalScope.btoa() 方法会将一个字符串对象转换为 base-64 编码的 ASCII 字符串，其中字符串中的每个字符被视为二进制数据的一个字节。

使用 btoa() 函数进行编码：

console.log(btoa("username:temppass")); // dXNlcm5hbWU6dGVtcHBhc3M=

要解码，您可以使用atob()函数：

console.log(atob("dXNlcm5hbWU6dGVtcHBhc3M=")); // username:temppass

查看受支持的浏览器列表此处

- trungk18

---

btoa() 无法用于编码拉丁1字符范围之外的字符。 - Sõber

@Shadoweb 现在应该使用 Buffer.from(<string>).toString('base64') 而不是 btoa()。 - Stephan Kulla

谢谢@StephanKulla，但最终只是VSC错误地抱怨了一下，重新启动解决了问题。 - Shadoweb