在 Angular (2+) 中对字符串进行 Base64 编码和解码

Question

如何在Angular 2中使用base64对字符串进行编码或解码？

我的前端工具是Angular 2。我有一个密码字符串，在传递给API之前需要进行base64编码。由于在服务中，base64编码的字符串将被解码。

因此，我正在寻找一些用于Angular2/Typescript的base64编码/解码库以及一些选项。

谢谢！！！

- praveen kumar

---

https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding - Thakur

Answer 1

使用btoa()函数来编码：

console.log(btoa("password")); // cGFzc3dvcmQ=

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

console.log(atob("cGFzc3dvcmQ=")); // password

- Robby Cornelissen

---

在使用之前，您可能需要确认您的目标浏览器是否支持此功能：https://caniuse.com/#search=btoa - edrian

只要您不支持非常老的IE版本，@edrian应该没问题。 - Robby Cornelissen

提醒一下，btoa()和atob()不支持UTF-8字符！ - darwin

@darwin 没错，那么如何使用 utf-8？ - Robert

@Robert 这个应该可以解决问题：https://dev59.com/Zl0a5IYBdhLWcg3woZ83 - darwin

Answer 2

自Angular 12起，btoa()和atob()函数已被弃用。请改用以下函数：

TextEncoder.encode() 和 TextDecoder.decode()

console.log(Buffer.from("Hello World").toString('base64'));
// SGVsbG8gV29ybGQ=
console.log(Buffer.from("SGVsbG8gV29ybGQ=", 'base64').toString('binary'))
// Hello World

注意：您必须显式编码！

- Eros Mazza

---

出现“ReferenceError: Buffer is not defined”错误。 - Pierre

我也遇到了这个错误。经过一些研究，我注意到 btoa 函数的弃用警告说：“此函数仅提供与旧版 Web 平台 API 的兼容性，并且不应在新代码中使用，因为它们使用字符串来表示二进制数据，并且早于 JavaScript 中引入类型化数组之前。对于使用 Node.js API 运行的代码，应使用 Buffer.from（str，'base64'）和 buf.toString（'base64'）在 Base64 编码的字符串和二进制数据之间进行转换。” 因此，它可以用于 API，而不是用于客户端代码。 - NFTX

“ReferenceError: Buffer is not defined” 错误可以通过安装 Buffer，使用 npm i buffer 命令并在调用该函数的位置引入解决。 请参阅在JavaScript中将字符串转换为base64。btoa和atob已弃用。 - kergrau

这些弃用警告是虚假的提示，来自于 nodeJS API，这是 Angular 工具所需的，但不会在浏览器上下文中出现。您必须在浏览器平台上使用 btoa/atob，在服务器平台上使用 Buffer。使用 window.atob 而不是 atob 是一个解决方法，以摆脱它。请参阅 https://github.com/microsoft/TypeScript/issues/45566。 - max-lt

Answer 3

在 Angular2 中进行 base64 编码，您可以使用 btoa() 函数。

示例：

console.log(btoa("stringAngular2")); 
// Output:- c3RyaW5nQW5ndWxhcjI=

在Angular2中，如果需要将base64解码，可以使用atob()函数。

例如：

console.log(atob("c3RyaW5nQW5ndWxhcjI=")); 
// Output:- stringAngular2

- VIKAS KOHLI

Answer 4

使用btoa("你的字符串")

更多信息：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

TypeScript是Javascript的超集，它可以使用现有的Javascript库和Web API。

- shusson

Answer 5

使用btoa()进行编码，使用atob()进行解码。

text_val:any="your encoding text";

编码文本：console.log(btoa(this.text_val)); //eW91ciBlbmNvZGluZyB0ZXh0

解码文本：console.log(atob("eW91ciBlbmNvZGluZyB0ZXh0")); //你的编码文本

这段代码涉及到了编码和解码文本。在JavaScript中，可以使用btoa()函数将字符串编码为base64格式，而atob()函数则用于将base64格式的字符串解码为原始字符串。在这个例子中，我们可以看到如何使用这两个函数来编码和解码文本。

- Yasintha

---

很高兴你想要帮忙，但是这个回答并没有增加额外的价值，因为它只是已被接受的答案的复制品。在 Stack Overflow 上，我们喜欢避免重复。请考虑删除这个回答。 - ViG

Answer 6

如果您想要一个更完整的解决方案，您可以使用turbocommons库。只需安装它即可：

npm install turbocommons-ts

然后调用你需要的方法：

import { ConversionUtils } from 'turbocommons-ts';

console.log(ConversionUtils.stringToBase64('hello'));
console.log(ConversionUtils.base64ToString('aGVsbG8='));

这个库是开源的，并经过了广泛的测试。更多信息请参见此处：

https://turboframework.org/en/blog/2022-10-26/encode-decode-base64-strings-javascript-typescript-php

- Jaume Mussons Abad