Angular 5 HTTP拦截器不起作用

Question

我的拦截器服务正在将授权标头添加到我的 http 调用中，但未能包含我传递给拦截器服务的实际不记名令牌值。 chrome 开发工具中出现的不记名令牌值只是“未设置”值，而不是不记名令牌值。当我从登录组件进行控制台登录时，不记名令牌值确实显示正确，所以我知道它是否被设置，但我猜它会在随后的 http 中使用之前的某个时间点重置回“未设置”值称呼？

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

您注入 LoginComponent 的 AuthInterceptor 与 HttpClient 框架使用的对象不同（即 AppModule 中 HTTP_INTERCEPTORS 的 useClass 中的对象）。

让 AuthInterceptor 使用一个新的可注入对象，比如 AuthService，您可以在其中存储 authToken。将其注入到 AuthInterceptor 和 LoginComponent 中：

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

确保在 AppModule 中将其声明为提供程序。