Angular 5 HTTP-Interceptor funktioniert nicht

Question

Mein Interceptor-Dienst fügt meinen http-Aufrufen den Autorisierungsheader hinzu, enthält jedoch nicht den tatsächlichen Bearer-Token-Wert, den ich an den Interceptor-Dienst übergebe. Der Bearer-Token-Wert, der in den Chrome-Entwicklungstools angezeigt wird, ist nur der Wert "Nicht festgelegt", nicht der Wert des Bearer-Tokens. Der Bearer-Token-Wert wird korrekt angezeigt, wenn ich ihn aus der Login-Komponente logge, also weiß ich, dass er gesetzt wird, aber ich denke, er wird irgendwann wieder auf den Wert 'nicht gesetzt' zurückgesetzt, bevor er im nachfolgenden http verwendet wird Anruf?

import { Component, OnInit }       from '@angular/core'; 
import { Router }          from "@angular/router"; 
import { HttpClient }         from "@angular/common/http"; 
import { Response, Headers, RequestOptions }   from "@angular/http"; 
import { AuthInterceptor }        from "../../services/authInterceptor.service"; 
import { MatSnackBar }         from '@angular/material'; 
import "rxjs/Rx"; 

@Component({ 
    selector: 'login', 
    templateUrl: './login.component.html' 
}) 
export class LoginComponent implements OnInit {  

    memberLogin: any = { 
     'emailAddress': '', 
     'password': '' 
    }; 

    public constructor(private http: HttpClient, private authInterceptor: AuthInterceptor, public snackBar: MatSnackBar, public router: Router) {   
    } 

    public ngOnInit() { 
    } 

    public login() { 

     let url: string = 'http://localhost:63741/api/Account/Login'; 
     let body = { "Email": this.memberLogin.emailAddress, "Password": this.memberLogin.password }; 

     this.http.post(url, body)    
      .subscribe(
       data => {  
        this.authInterceptor.authToken = data.toString(); 
        console.log('token data in login component : ' + this.authInterceptor.authToken); 
        this.snackBar.open('welcome back, you are now logged in', 'ok', { duration: 2200 })      
       }, 
       err => { 

       }); 

     return; 
    }; 

} 

import { Injectable }            from '@angular/core'; 
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest }  from '@angular/common/http'; 
import { Observable }            from 'rxjs/Observable'; 

@Injectable() 
export class AuthInterceptor { 

    authToken: string = 'not set'; 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {   
     const authReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + this.authToken) }); 
     return next.handle(authReq); 
    } 
} 

Answer 1

Der AuthInterceptor, die man in LoginComponent injizieren ist nicht das gleiche Objekt wie die durch den Rahmen Httpclient verwendet (das heißt die in der useClass für HTTP_INTERCEPTORS in AppModule).

Lassen Sie den AuthInterceptor einen neuen injizierbaren Autodienst verwenden, in dem Sie den authToken speichern. Injizieren diese sowohl in die AuthInterceptor und LoginComponent:

@Injectable() 
export class AuthService { 
    public authToken: string = 'not set'; 
} 

Stellen Sie sicher, dies als Anbieter in AppModule zu erklären.