Angular5中如何为HttpClient请求添加Basic Authorization HTTP Header

没问题，我来帮你一步步修改代码，实现带Basic Auth的请求：

步骤1：导入HttpHeaders #

首先确保你已经从@angular/common/http导入了HttpHeaders：

import { HttpClient, HttpHeaders } from '@angular/common/http';

步骤2：构造Basic Auth的Header #

Basic Auth的格式是Authorization: Basic <base64编码的用户名:密码>，你需要先把用户名和密码拼接成username:password的字符串，再用base64编码，然后构造HttpHeaders对象：

// 替换成你的实际用户名和密码
const username = 'your-username';
const password = 'your-password';

// 浏览器环境用btoa编码，Node环境用Buffer处理
const authToken = btoa(`${username}:${password}`);

// 创建headers对象
const headers = new HttpHeaders({
  'Authorization': `Basic ${authToken}`
});

步骤3：在get请求中传入headers #

把构造好的headers作为get方法的第二个参数（options对象里的headers属性）传入：

this.myHttpClient.get(URL, { headers: headers }).subscribe((x: Array<any>) => {
  this.guidesList = x;
});

简化写法（可选） #

如果想更简洁，也可以把headers的创建直接内嵌到请求里：

this.myHttpClient.get(URL, {
  headers: new HttpHeaders({
    'Authorization': `Basic ${btoa('your-username:your-password')}`
  })
}).subscribe((x: Array<any>) => {
  this.guidesList = x;
});

注意事项 #

• 绝对不要在生产代码里硬编码用户名和密码！建议从环境变量或安全的配置源读取。
• 若在Node.js环境（比如SSR场景），btoa不可用，可改用Buffer.from(${username}:${password}).toString('base64')完成编码。

内容的提问来源于stack exchange，提问作者roy mendelovitz