如何在Angular中的HttpInteger中传递Cognito JWT令牌

Question

我目前有一个应用程序，它使用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);
}
}

我的问题是，到目前为止，我已经使用getItem获得了在localStorage中设置的令牌值的密钥，并将该密钥值传递到标头中。

如果我有多个用户，这是不起作用的，因为每个密钥都不同。

无论谁登录，我都该如何通过拦截器传递jwt令牌。

如有任何帮助，将不胜感激

Answer 1

您应该将您的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);
})
);
}
}

然后在您的认知服务中，您必须提供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设置为类型通常不是一个好的做法。