具有基本授权的角度 Api 请求答案

【问题标题】：angular Api Request with Basic Authorizartion具有基本授权的角度 Api 请求
【发布时间】：2017-12-02 18:28:31
【问题描述】：

如何在 Angular 框架 中发出这个 Jquery 请求？我对角度框架非常陌生，但我爱上了它。而且我喜欢弄清楚如何使用基本授权标头进行 HTTP Get。

var settings = {
  "url": "https://sampleapi.com",
  "method": "GET",
  "headers": {
    "authorization": "Basic QjNYRnZ6S1Jk",
    "content-type": "aplication/json"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

我应该构建一个服务控制器还是只是一个常规组件。

【问题讨论】：

如果您如此热爱该框架，为什么不从涵盖 HTTP 相关问题的基础教程开始呢？（有很多）
或者只是在谷歌周围搜索：angular.io/guide/http（角度 http 请求的第一个结果）

标签： angular get basic-authentication

【解决方案1】：

您可以如下使用RequestOptions

const url = `https://sampleapi.com`;
const headers = new Headers();
headers.append('Authorization', 'Basic QjNYRnZ6S1Jk');
headers.append('Content-Type', 'application/json');
const options = new RequestOptions({ headers: headers });
return this.http.get(url, options)
    .map(this.extractData)
    .catch(this.handleErrors);

private extractData(res: Response) {
            const data = res.json();
            return data;
}

private handleErrors(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
}

【讨论】：

【解决方案2】：

如果您使用的是 Angular 4.3 及更高版本，并且想要使用新的 HttpClient 和 HttpHeaders，那么这可能对您有用。

这是一个使用基本授权进行调用的服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

const url = `https://sampleapi.com`;

@Injectable()
export class BasicService {
  private _headers = new HttpHeaders().set('Content-Type', 'application/json');
  constructor(private httpClient: HttpClient) { }

  getWithBasicAuth(): Observable<any> {
    const headers = this._headers.append('Authorization', 'Basic QjNYRnZ6S1Jk');
    return this.httpClient.get<any>(url, { headers : headers });
  }
}

这是一个使用上述服务的组件。

import { Component, OnInit } from '@angular/core';
import { BasicService } from '../services/basic.service';

@Component({
  selector: 'app-basic',
  templateUrl: './basic.component.html',
  styleUrls: ['./basic.component.css']
})
export class BasicComponent implements OnInit {
  dataFormService: any;

  constructor(private basicService: BasicService) { }

  ngOnInit() {
    this.basicService.getWithBasicAuth().subscribe(data => this.dataFormService = data);
  }
}

您可能希望将服务的返回类型从 any 更改为更合适的类型。

【讨论】：