如何在JSON请求中使用username和password变量（Angular 4场景）

嘿，我来帮你搞定这个问题！既然你已经成功获取到了username和password变量，接下来只需要借助Angular的HttpHeaders就能轻松把它们放到请求头里发送啦，具体步骤如下：

1. 导入必要的模块 #

首先确保在你的组件或服务中导入HttpClient和HttpHeaders：

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

// 别忘了在构造函数中注入HttpClient
constructor(private http: HttpClient) { }

2. 创建包含用户名和密码的请求头 #

假设你已经从用户输入中拿到了username和password变量，用它们来构建请求头对象：

// 这里替换成你实际获取到的变量
const userInputUsername = this.username; // 你的username变量
const userInputPassword = this.password; // 你的password变量

// 构建请求头，键名要和后端要求的一致哦
const requestHeaders = new HttpHeaders({
  'Username': userInputUsername,
  'Password': userInputPassword,
  // 如果需要携带token，也可以一起加到header里
  'Authorization': `Bearer ${yourTokenVariable}`
});

3. 发送请求时携带这个请求头 #

接下来发送POST请求的时候，把刚才创建的请求头作为选项传入：

this.http.post('你的目标API地址', {}, { headers: requestHeaders })
  .subscribe(
    (response) => {
      console.log('请求成功返回：', response);
    },
    (error) => {
      console.error('请求出错啦：', error);
    }
  );

额外提示：如果后端要求Basic认证 #

有些后端会要求用Basic Auth格式传递用户名密码，这时候需要把username:password编码成Base64：

const basicAuth = 'Basic ' + btoa(`${userInputUsername}:${userInputPassword}`);
const requestHeaders = new HttpHeaders({
  'Authorization': basicAuth,
  'Authorization': `Bearer ${yourTokenVariable}` // 同时携带token的话
});

记得要和后端开发人员确认好请求头的键名（比如是否是X-Username、X-Password这类自定义头），确保和后端的接收逻辑匹配哦！

内容的提问来源于stack exchange，提问作者Oleg Fedorin