如何在Angular的HttpInteceptor中傳遞CognitoJWT令牌

我目前有一個使用 Cognito 進行用戶登錄和身份驗證的應用程式

這就是我用于用戶身份驗證的內容

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import Amplify, { Auth } from 'aws-amplify';

import { environment } from '../environments/environment';

export interface IUser {
  email: string;
  password: string;
  showPassword: boolean;
  code: string;
  name: string;
}

@Injectable({
  providedIn: 'root',
})
export class CognitoService {

  private authenticationSubject: BehaviorSubject<any>;

  Tokentest: string = '';

  constructor() {
    Amplify.configure({
      Auth: environment.cognito
    });

    this.authenticationSubject = new BehaviorSubject<boolean>(false);
  }

  public signUp(user: IUser): Promise<any> {
    return Auth.signUp({
      username: user.email,
      password: user.password,
    });
  }

  public confirmSignUp(user: IUser): Promise<any> {
    return Auth.confirmSignUp(user.email, user.code);
  }

  public signIn(user: IUser): Promise<any> {

    return Auth.signIn(user.email, user.password)
    .then((user) => {
      this.authenticationSubject.next(true);
      let Token = user.getSignInUserSession().getAccessToken().getJwtToken();
      console.log(Token);
      this.Tokentest = Token;
    });
    
  }

  public signOut(): Promise<any> {
    return Auth.signOut()
    .then(() => {
      this.authenticationSubject.next(false);
    });
  }

  public isAuthenticated(): Promise<boolean> {
    if (this.authenticationSubject.value) {
      return Promise.resolve(true);
    } else {
      return this.getUser()
      .then((user: any) => {
        if (user) {
          return true;
        } else {
          return false;
        }
      }).catch(() => {
        return false;
      });
    }
  }

  public getUser(): Promise<any> {
    return Auth.currentUserInfo();
  }

  public updateUser(user: IUser): Promise<any> {
    return Auth.currentUserPoolUser()
    .then((cognitoUser: any) => {
      return Auth.updateUserAttributes(cognitoUser, user);
    });
  }

}

然后我有一個令牌攔截器服務，它查看任何 http 請求并在標頭中傳遞 jwt 令牌

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import Amplify, { Auth} from 'aws-amplify';
import { IUser, CognitoService } from '../cognito.service';

@Injectable({
  providedIn: 'root'
})

export class TokenInteceptorService implements HttpInterceptor {


  constructor() { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    ///
    let token = localStorage.getItem('{the key for the jwt token}')
    let jwttoken = req.clone({
     setHeaders:{
       Authorization: 'Bearer '   token
     } 
    })
    return next.handle(jwttoken);
  }
}

我的問題是，到目前為止，我已經獲得了在localStorage使用getItem該鍵值并將該鍵值傳遞到標頭時設定的令牌值的鍵。

如果我有多個用戶，這不起作用，因為每個鍵都會不同。

無論誰登錄，我將如何通過攔截器傳遞 jwt 令牌。

任何幫助將不勝感激

uj5u.com熱心網友回復：

您應該將您的 CognitoService 注入您的攔截器，如下所示：

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, from, switchMap } from 'rxjs';
import Amplify, { Auth } from 'aws-amplify';
import { IUser, CognitoService } from '../cognito.service';

@Injectable({
  providedIn: 'root',
})
export class TokenInteceptorService implements HttpInterceptor {
  constructor(private readonly _cognitoService: CognitoService) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    //
    return from(this._cognitoService.getSession()).pipe(
      switchMap((session) => {
        let jwttoken = req.clone({
          setHeaders: {
            Authorization: 'Bearer '   session.accessToken.jwtToken,
          },
        });
        return next.handle(jwttoken);
      })
    );
  }
}

然后在您的 CognitoService 中您必須提供getSession()功能：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import Amplify, { Auth } from 'aws-amplify';

import { environment } from '../environments/environment';

export interface IUser {
  email: string;
  password: string;
  showPassword: boolean;
  code: string;
  name: string;
}

@Injectable({
  providedIn: 'root',
})
export class CognitoService {
  private authenticationSubject: BehaviorSubject<any>;

  Tokentest: string = '';

  constructor() {
    Amplify.configure({
      Auth: environment.cognito,
    });

    this.authenticationSubject = new BehaviorSubject<boolean>(false);
  }

  public signUp(user: IUser): Promise<any> {
    return Auth.signUp({
      username: user.email,
      password: user.password,
    });
  }

  public confirmSignUp(user: IUser): Promise<any> {
    return Auth.confirmSignUp(user.email, user.code);
  }

  public signIn(user: IUser): Promise<any> {
    return Auth.signIn(user.email, user.password).then((user) => {
      this.authenticationSubject.next(true);
      let Token = user.getSignInUserSession().getAccessToken().getJwtToken();
      console.log(Token);
      this.Tokentest = Token;
    });
  }

  public signOut(): Promise<any> {
    return Auth.signOut().then(() => {
      this.authenticationSubject.next(false);
    });
  }

  public isAuthenticated(): Promise<boolean> {
    if (this.authenticationSubject.value) {
      return Promise.resolve(true);
    } else {
      return this.getUser()
        .then((user: any) => {
          if (user) {
            return true;
          } else {
            return false;
          }
        })
        .catch(() => {
          return false;
        });
    }
  }

  public getUser(): Promise<any> {
    return Auth.currentUserInfo();
  }

  public getSession(): Promise<any> {
    return Auth.currentSession();
  }

  public updateUser(user: IUser): Promise<any> {
    return Auth.currentUserPoolUser().then((cognitoUser: any) => {
      return Auth.updateUserAttributes(cognitoUser, user);
    });
  }
}

一個提示：您還應該檢查您的型別。設定any為型別通常不是一個好習慣。

標籤：有角度的亚马逊认知角度http拦截器

上一篇：需要通過formControlName傳遞系結在Ng-multiselect-dropdown中的所有資料欄位

下一篇：AngularOnInitforlooppush回傳一個空陣列