如何使用用户名，密码基本身份验证加上角4令牌

Question

我已经开发了采用了棱角分明4.在形式我都送使用POST方法采用了棱角分明4.对于表单数据，我有邮差测试数据被正确到来的形式。我必须使用授权类型，基本验证用户名和密码。

而在头，我必须通过内容类型为application / HAL + JSON，授权为基础和X-CSRF令牌作为，最后在体内我有送一些生JSON数据。请看看共享下面的屏幕。

所以采用了棱角分明如何实现这一目标？任何人可以帮助炒面吗？我在这一点上达成实现这一目标。

我所使用的形式是一个对话框：

<div class="container">
<app-dialog [(visible)]="showDialog">
    <form class="form-horizontal">
    <div style="background-color:#363636; color:#ffffff; padding: 7px;
    margin: -12px -12px 12px -12px;">ADD NEW INVOICE</div>
    <div><label>Request ID *</label><input type="text"></div>
    <div><label>Date *</label>

      <my-date-picker name="mydate" [options]="myDatePickerOptions"
      required></my-date-picker>

    </div>
    <div><label>Category *</label></div>
    <div><label>Details *</label></div>
    <div><label>Job (Optional)*</label></div>
    <div><label>Select Upload</label>
  <p>
    Single: <input type="checkbox" name="uploadtype" value="single" />
    Weekly: <input type="checkbox" checked name="uploadtype" value="weekly" />
    Monthly: <input type="checkbox" name="uploadtype" value="monthly" /><br />
  </p>
    </div>
    <div>Upload Document *: <span>
      <input type="file" name="pic" accept="image/*">

    </span></div>
    <div>Amount *</div>
    <button type="submit" class="btn btn-success" (click)="onSubmit()">Submit</button>
  </form>
  </app-dialog>
</div>

所以我的问题是如何将表单数据发送到服务器。

我创建了服务：

private headers = new Headers();
    headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    getInvoiceDetails(){
            let headers = new Headers();
            this.createAuthorizationHeader(headers);
            return this.http.get(this.config.apiUrl + 'api/supplier-invoice/121', { headers: headers })
            .map(response => response.json());
        }

我很疑惑关于这个问题，我很初级用户这个角度和认证的概念。谁能帮我？

Answer 1

如果你想发送的主体数据，我也看到邮递员屏幕截图作为后再审，但在你的代码使用GET请求使用POST请求。 PFB用于发布请求的代码示例

registerUser(registration: RegistrationTO): Promise<String> {
    let headers = new Headers();
    let body = JSON.stringify(
      {
        "userName": registration.userId,
        "emailId": registration.emailId,
        "userId": registration.userId
      }
    );
    headers.append('Content-Type', 'application/json');
    let params:URLSearchParams = new URLSearchParams();
    let requestOption: RequestOptionsArgs =
      {search: params,  headers: headers };
    return this.http
      .post(RegistrationUrl, body, requestOption)
      .toPromise()
      .then(res => res.json())
      .catch((err)=>{
        this.handleError(err);
      });
  }

Answer 2

public login(event):
Observable<HttpResponse<Config>> {
var username = event.target.elements[0].value;
var password = event.target.elements[1].value;
let headers = new HttpHeaders();
headers = headers.append('Authorization', "Basic "+btoa(username+':'+password));

console.log(headers);

return this.http.get<Config>(
  "http://localhost:8081/users/login",  {
    headers, observe: 'response',
    withCredentials: true
  });

}

withCredentials：真的是足以应付饼干