Angular JWT：授權Header是null？

Question

按照本教程，我想在我的 Angular 應用程序中實現一個登錄功能，該應用程序與在 Spring Boot 中制作的后端進行通信，並且在后端使用了 Spring 安全性。

問題很明顯：在我的程序中，授權 header 沒有正確添加

在我的 jwt.interceptor.ts 中，我包含了一些 conole.log 命令來查看問題出在哪里：

@Injectable()
export class JwtInterceptor implements HttpInterceptor {

  constructor(private authenticationService: AuthenticationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let currentUser = this.authenticationService.currentUserValue;
    console.log(currentUser);
    console.log(request.headers);
    if (currentUser) {
      // token exists on user so we take the request and add an Authorization header with the jwt token so we keep access
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}` //basically what I do in postman to get access
        }
      });
    }
    return next.handle(request);
  }
}

當我查看控制台時，奇怪的是實例 currentUser 的主體似乎有一個 jwt-token 但是當我嘗試打印出它的令牌字段（在其類中定義）時，該字段未定義

雖然請求附加了授權 header，但 Bearer 值未定義

我的授權服務 (authorization.service.ts) 中發生的事情是從本地存儲調用帶有鍵 currentUser 的 object 並返回其值。 這是在我們登錄時存儲的——我們從 /authenticate 端點 JSON 獲取用戶。將其字符串化並將其存儲在本地存儲中。 然后在獲取 currentUserValue 時，我得到了它的 .value 字段：

  constructor(private httpClient: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser'))); // user from json
    this.currentUser = this.currentUserSubject.asObservable();
  }

.......

public get currentUserValue(): User {
    return this.currentUserSubject.value;
  }

我如何才能將令牌正確添加到我的授權 header 中？

我找到了一個不太好的解決方案：

在 auhentication.service 中，在構造函數中執行此操作（並將該字段也添加到 class）：

  constructor(private httpClient: HttpClient) {
    this.tokenString = new BehaviorSubject<any>(JSON.parse(localStorage.getItem('currentUser'))).value.jwt;
  }

然后在設置授權header時調用訪問該字段。至少解決了這個問題。 如果有更好的解決方案我想知道。

這是解決此問題的更好方法：

首先向您的用戶 class 添加一個名為 jwt 的字符串字段，然后在構造函數中執行此操作，因為 currentUser 只能調用一次：

  constructor(private httpClient: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
    this.tokenString = this.currentUserSubject.value.jwt;
    this.currentUser = this.currentUserSubject.asObservable();
  }

Answer 1

在jwt密鑰中可用的控制台令牌中嘗試這樣，您正在使用token密鑰進行訪問

@Injectable()
export class JwtInterceptor implements HttpInterceptor {

  constructor(private authenticationService: AuthenticationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let currentUser = this.authenticationService.currentUserValue;
    console.log(currentUser);
    console.log(request.headers);
    if (currentUser) {
      // token exists on user so we take the request and add an Authorization header with the jwt token so we keep access
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${currentUser.jwt}` //basically what I do in postman to get access
        }
      });
    }
    return next.handle(request);
  }
}

Answer 2

從文檔中，標頭的鍵不是setHeaders而是headers ，因此這是克隆請求的正確方法：

request = request.clone({
  headers: new HttpHeaders({
    Authorization: `Bearer ${currentUser.token}`
  })
});