Token 侦听器未设置授权令牌

嗨，我正在尝试编写一个简单的Angular 6拦截器，在发送请求时将jwt令牌添加到头中

问题是请求中的头在后端到达NULL，所以我当然无法获得授权令牌，而且我很难弄清楚原因

我很确定问题出在我的js代码中，因为如果我尝试通过任何REST客户端发送相同的请求，我可以在Java代码中看到标题

以下是我的js代码：

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private http: HttpClient, private userService: UserService) { }

  ngOnInit() {  
    this.userService.getAllUsers().subscribe(
      data => {
        console.log(data);
/*         this.users_from_db=data; */
      },
      err => {
        console.log(err);
      }
    );
  }

  users_from_db: Observable<any>;
}



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


const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class UserService {

  constructor(private http: HttpClient) {}

  public getAllUsers(): Observable<any> {
    return  this.http.get<any>('http://localhost:8080/users/get-all');
  }

}



import { Injectable } from '@angular/core';
import {HttpInterceptor, HttpRequest, HttpHandler, HttpSentEvent, HttpHeaderResponse, HttpProgressEvent,
  HttpResponse, HttpUserEvent, HttpErrorResponse} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import {TokenStorage} from './token.storage';
import 'rxjs/add/operator/do';

const TOKEN_HEADER_KEY = 'Authorization';

@Injectable()
export class Interceptor implements HttpInterceptor {

  constructor(private token: TokenStorage, private router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
    let authReq = req;
    if (this.token.getToken() != null) {
      console.log("authorizing...");
      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + this.token.getToken())});
      console.log(authReq);
    }
    if (!authReq.headers.has('Content-Type')) {
      authReq = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
    }

    return next.handle(authReq).do(
        (err: any) => {
          if (err instanceof HttpErrorResponse) {
            console.log(err);
            console.log('req url :: ' + req.url);
            if (err.status === 401) {
              this.router.navigate(['login']);
            }
          }
        }
      );
  }

}

从'@angular/core'导入{Component，OnInit}；
从“rxjs/Observable”导入{Observable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“/user.service”导入{UserService}；
@组成部分({
选择器：“应用程序用户”，
templateUrl:“./user.component.html”，
样式URL:['./user.component.css']
})
导出类UserComponent实现OnInit{
构造函数（私有http:HttpClient，私有userService:userService）{}
ngOnInit（）{
此.userService.getAllUsers（）为订阅(
数据=>{
控制台日志（数据）；
/*这是。用户\u from_db=数据*/
},
错误=>{
控制台日志（err）；
}
);
}
来自数据库的用户：可观察；
}
从“@angular/core”导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs/Observable”导入{Observable}；
常量httpOptions={
标题：新的HttpHeaders（{'Content-Type'：'application/json'}）
};
@可注射（）
导出类用户服务{
构造函数（私有http:HttpClient）{}
public getAllUsers（）：可观察{
返回此.http.get（'http://localhost:8080/users/get-全部);；
}
}
从“@angular/core”导入{Injectable}；
导入{HttpInterceptor，HttpRequest，HttpHandler，HttpSentEvent，HttpHeaderResponse，HttpProgressEvent，
来自“@angular/common/http”的HttpResponse、HttpUserEvent、HttpErrorResponse}；
从“rxjs/Observable”导入{Observable}；
从'@angular/Router'导入{Router}；
从“./token.storage”导入{TokenStorage}；
导入'rxjs/add/operator/do'；
const TOKEN_HEADER_KEY='Authorization'；
@可注射（）
导出类拦截器实现HttpInterceptor{
构造函数（专用令牌：令牌存储，专用路由器：路由器）{}
拦截（请求：HttpRequest，下一步：HttpHandler）：
可观察{
让authReq=req；
if（this.token.getToken（）！=null）{
控制台日志（“授权…”）；
authReq=req.clone（{headers:req.headers.set（TOKEN\u HEADER\u KEY，'Bearer'+this.TOKEN.getToken（））}）；
console.log（authReq）；
}
如果（！authReq.headers.has（'Content-Type'））{
authReq=req.clone（{headers:req.headers.set（'Content-Type'，'application/json'））}）；
}
返回next.handle（authReq.do）(
（错误：任意）=>{
if（HttpErrorResponse的错误实例）{
控制台日志（err）；
log（'req url:：'+req.url）；
如果（错误状态===401）{
this.router.navigate（['login']）；
}
}
}
);
}
}

当我在intercept函数中执行

this.token.getToken（）

时，令牌的值肯定存在。我通过在浏览器控制台中打印值进行了检查

---

谢谢你的帮助

这是我的拦截器：

import { Injectable } from "@angular/core";
import { HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse, HttpInterceptor } from "@angular/common/http";
import { Observable, BehaviorSubject, throwError } from "rxjs";
import { catchError, map, filter, take, switchMap, finalize } from "rxjs/operators";
import { AppConsts } from "../consts";

@Injectable()
export class JwtInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {        
        return next.handle(this.addTokenToRequest(request)).pipe(
            map(res => res),
            catchError(err => {
        if (err instanceof HttpErrorResponse && err.status === 401 && err.headers.has("Token-Expired")) {
                    // here code to refresh token if needed
                } else {
                    return throwError(err);
                }
            })
        );
    }

    private addTokenToRequest(request: HttpRequest<any>, token: string = null): HttpRequest<any> {
        if (token) {
            request = request.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
        }
        else {
            const currentUser = JSON.parse(localStorage.getItem(AppConsts.DEFAULT_USER_STORAGE_NAME));
            if (currentUser && currentUser.token) {
                request = request.clone({
                    setHeaders: {
                        Authorization: `Bearer ${currentUser.token}`
                    }
                });
            }
        }
        return request;
    }
}

从“@angular/core”导入{Injectable}；
从“@angular/common/http”导入{HttpRequest、HttpHandler、HttpEvent、HttpErrorResponse、HttpInterceptor}；
从“rxjs”导入{Observable，BehaviorSubject，throwError}；
从“rxjs/operators”导入{catchError、map、filter、take、switchMap、finalize}；
从“./consts”导入{AppConsts}；
@可注射（）
导出类JwtInterceptor实现HttpInterceptor{
拦截（请求：HttpRequest
看那里