Anfügen eines JWT-Tokens an API-Anforderung über Angular 4

Question

Ich baue eine Angular-App mit ASP.NET Core 2.0-Back-End. Ich habe JWT Login erfolgreich implementiert und es funktioniert gut. Nach dem Lernprogramm here versuche ich Daten für Ressourcen abzurufen, die eine Autorisierung über JWT benötigen. Ich habe den Postboten verwendet, um zu überprüfen, ob das funktioniert, wenn ich das Token verwende, um das HTTP zu bekommen.

In meiner eckigen App erhalte ich 401. Ich verwende die Visual Studio 2017 eckige Vorlagen-App für meine Beispiel-App. Alles andere funktioniert, ich kann mich anmelden, wenn mein Token abgelaufen ist, werde ich aufgefordert, mich erneut anzumelden, damit all diese Aspekte funktionieren. Ich vermisse nur den letzten Teil. Der Server-API-Aufruf ist wie folgt:

[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)] 
[Route("api/[controller]")] 
public class SampleDataController : Controller 
{ 
    private static string[] Summaries = new[] 
    { 
     "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" 
    }; 

    [HttpGet("[action]")] 
    public IEnumerable<WeatherForecast> WeatherForecasts() 
    { 
     var rng = new Random(); 
     return Enumerable.Range(1, 5).Select(index => new WeatherForecast 
     { 
      DateFormatted = DateTime.Now.AddDays(index).ToString("d"), 
      TemperatureC = rng.Next(-20, 55), 
      Summary = Summaries[rng.Next(Summaries.Length)] 
     }); 
    } 

    public class WeatherForecast 
    { 
     public string DateFormatted { get; set; } 
     public int TemperatureC { get; set; } 
     public string Summary { get; set; } 

     public int TemperatureF 
     { 
      get 
      { 
       return 32 + (int)(TemperatureC/0.5556); 
      } 
     } 
    } 
} 

Die Winkelkomponente hat den folgenden Code:

import { Component, Inject } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Component({ 
    selector: 'fetchdata', 
    templateUrl: './fetchdata.component.html' 
}) 
export class FetchDataComponent { 
    public forecasts: WeatherForecast[]; 

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) { 
     http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => { 
      this.forecasts = result.json() as WeatherForecast[]; 
     }, error => console.error(error)); 
    } 
} 

interface WeatherForecast { 
    dateFormatted: string; 
    temperatureC: number; 
    temperatureF: number; 
    summary: string; 
} 

Hier ist der Code, der die Genehmigung Header fügt hinzu:

import { Injectable } from '@angular/core'; 

import { 
    HttpRequest, 
    HttpHandler, 
    HttpEvent, 
    HttpInterceptor} from '@angular/common/http'; 
//import { AuthService } from './auth/auth.service'; 
import { Observable } from 'rxjs/Observable'; 
import { Http } from "@angular/http/http"; 
import { AuthService } from "./auth.service"; 
import { HttpClient } from "@angular/common/http"; 
@Injectable() 
export class TokenInterceptor implements HttpInterceptor { 
    constructor(public auth: AuthService) { } 
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

    request = request.clone({ 
     setHeaders: { 
     Authorization: `Bearer ${this.auth.getToken()}` 
     } 
    }); 
    return next.handle(request); 
    } 
} 

Jede Hilfe wird sehr geschätzt.

Answer 1

das Problem hier war:

Authorization: `Bearer ${this.auth.getToken()}` 

Die getToken Methode wurde das gesamte Token-Objekt zurück. Stattdessen kann, wie jemand auf einem anderen Thread ausgeführt hat, musste ich ausdrücklich den tatsächlichen Token-String wie folgt extrahieren:

JSON.parse(localStorage.getItem('token')).token 

Das ist mein Problem gelöst.

Answer 2

Das ist also sehr einfach, das Tutorial, das Sie geschrieben haben, benutzte angualar-jwt (das ich selbst benutzt habe).

Sie stellen einen eigenen Wrapper für den HTTP-Dienst bereit, der ein gespeichertes JWT-Token als Teil der Anforderung an Ihren (oder einen anderen) API-Endpunkt sendet.

Wenn seine andere API nur sicherstellen, dass Sie das Header-Präfix so ändern, dass es dem entspricht, wo sie ein JWT-Token erwarten.

Vom angular2-jwt readme:

Wenn Sie nur wünschen, auf eine bestimmte HTTP-Anforderung eine JWT zu senden, können Sie die AuthHttp Klasse. Diese Klasse ist ein Wrapper für Angular 2's Http und unterstützt somit alle die gleichen HTTP-Methoden.

import { AuthHttp } from 'angular2-jwt'; 
// ... 
class App { 

thing: string; 

constructor(public authHttp: AuthHttp) {} 

getThing() { 
    this.authHttp.get('http://example.com/api/thing') 
    .subscribe(
     data => this.thing = data, 
     err => console.log(err), 
     () => console.log('Request Complete') 
    ); 
} 
} 

Answer 3

können Sie Optionen Parameter an Ihre http passieren Methode erhalten, überprüfen Sie hier aus https://angular.io/api/http/RequestOptionsArgs