HttpClient.get 标头中的角度设置授权答案

【问题标题】：Angular set autorization on HttpClient.get headerHttpClient.get 标头中的角度设置授权
【发布时间】：2018-04-18 07:47:56
【问题描述】：

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpErrorResponse, HttpResponse} from '@angular/common/http';

@Component({
  selector: 'git',
  templateUrl: './git.component.html'
})

export class GitComponent implements OnInit {
  constructor(private http: HttpClient) {
  }
  ngOnInit(): void {
    const headers = {authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzYXNobyIsImF1dGgiOiJST0xFX1VTRVIiLCJleHAiOjE1MjQwODcyMzJ9.MUv5RgI9LxQyrrCfjfX8HR2-XiQmz4vjLqH7V_0Du7VFLC0WrK_y3FfeNoT2Nj_uguIK2ss7jv-LNiHuCGtz4A'};
    this.http.get('http://localhost:8080/links/all', headers)
      .subscribe((e) => {
        console.log(e);
      }, (err: HttpErrorResponse) => {
        console.log(err);
      });
  }
}

在http.get我如何设置授权？我想使用保存在const headers 中的不记名令牌。就这样。谢谢

编辑：我忘了提到我想知道如何在这里手动设置它而不是使用拦截器，所有教程都使用拦截器，所以我无法弄清楚

【问题讨论】：

标签： javascript angular httpclient

【解决方案1】：

试试这个：

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpErrorResponse, HttpResponse} from '@angular/common/http';

@Component({
  selector: 'git',
  templateUrl: './git.component.html'
})

export class GitComponent implements OnInit {
  constructor(private http: HttpClient) {
  }
  ngOnInit(): void {
    const headers =  'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzYXNobyIsImF1dGgiOiJST0xFX1VTRVIiLCJleHAiOjE1MjQwODcyMzJ9.MUv5RgI9LxQyrrCfjfX8HR2-XiQmz4vjLqH7V_0Du7VFLC0WrK_y3FfeNoT2Nj_uguIK2ss7jv-LNiHuCGtz4A';
    this.http.get('http://localhost:8080/links/all', {
      headers: new HttpHeaders().set('Authorization', headers )
    })
      .subscribe((e) => {
        console.log(e);
      }, (err: HttpErrorResponse) => {
        console.log(err);
      });
  }
}

【讨论】：

回答，我只是快速休息一下。这会从后端返回结果，但我怎样才能获得 http 响应状态，例如 200、400、404、403？
获取响应状态：e.status from response

【解决方案2】：

试试这样的：

let authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzYXNobyIsImF1dGgiOiJST0xFX1VTRVIiLCJleHAiOjE1MjQwODcyMzJ9.MUv5RgI9LxQyrrCfjfX8HR2-XiQmz4vjLqH7V_0Du7VFLC0WrK_y3FfeNoT2Nj_uguIK2ss7jv-LNiHuCGtz4A'

 let header: Headers = new Headers;
        header.set('authorization', this.authorization);
        this.http.get('http://localhost:8080/links/all', 
    {headers: header}).subscribe((e) => {
    console.log(e);
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });

【讨论】：

【解决方案3】：

您可以查看 Angular http 拦截器以将令牌附加到每个传出请求： https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

【讨论】：

【解决方案4】：

你需要你的 headers 对象在另一个对象get(....., { headers })

第二个arg是一个通用的options对象，用于headers，请求params等，见https://angular.io/api/common/http/HttpClient

（与其他一些答案相反，您不需要将标头包装在 HttpHeaders 对象中，因为接受的类型已重载）

【讨论】：