ReactJS中btoa方法已废弃，如何实现base64字符串编码？

问题场景 #

对接需要Client ID、Client Secret做授权验证的API时，使用btoa()方法拼接Basic授权头收到方法废弃的提示，原实现代码如下：

"Authorization" : "Basic" + btoa(ClientID + ":" + ClientSecret);

分环境解决方案 #

Node.js环境 #

使用Node内置的BufferAPI完成Base64编码，是官方推荐的替代方案：

// 注意Basic后面要加半角空格，否则服务端会识别失败
const authorization = "Basic " + Buffer.from(`${ClientID}:${ClientSecret}`).toString('base64');

浏览器环境 #

当前浏览器规范仅将传入二进制字符串的btoa调用标记为废弃，可通过TextEncoder先将UTF-8字符串转为字节流再编码，不会触发废弃警告：

const encoder = new TextEncoder();
const credentialBytes = encoder.encode(`${ClientID}:${ClientSecret}`);
const authorization = "Basic " + btoa(String.fromCharCode(...credentialBytes));

注意事项 #

• 授权头中的Basic关键字后必须保留半角空格，原实现缺了空格会导致服务端校验失败
• 授权凭证不得通过HTTP协议传输，必须全程使用HTTPS避免凭证泄露

内容的提问来源于stack exchange，提问作者Geo P