如何将 AWS Cognito 令牌添加到 Angular Http 拦截器

Question

我正在使用 AWS Cognito 和 Angular 8 为我的应用程序构建登录页面。一切正常，直到我尝试创建 getToken() 函数，事实证明 getSession() 方法接受 callback 而不是返回 string。

这意味着我必须像这样将它包装在 Promise 中：

export function getToken() {
  var currentUser = userPool.getCurrentUser();
  if (!currentUser) {
    // redirect to login page
  } else {
    return new Promise((resolve, reject) => {
      currentUser.getSession((err, session) => {
        if (err) {
          reject(err);
        } else if (!session.isValid()) {
          resolve(null);
        } else {
          resolve(session.getIdToken().getJwtToken());
        }
      });
    });
  }
}

这里是我的拦截器：

@Injectable()
export class AuthenInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>> {

        // Add token to the header.......

        return next.handle(req);
    }
}

据我所知，在这里返回 Promise 不是一种选择。那么如何将令牌添加到标题中？还是应该直接从 localStorage 中获取？

Answer 1

您可以在intercept 函数中返回Observable。 return next.handle(req); 正在返回 Observable<HttpEvent<any>>。

您可以使用from 从getToken() 返回Observable：

import { from } from 'rxjs';

export function getToken() {
  var currentUser = userPool.getCurrentUser();
  if (!currentUser) {
    // redirect to login page
  } else {
    return from(
      new Promise((resolve, reject) => {
        currentUser.getSession((err, session) => {
          if (err) {
            reject(err);
          } else if (!session.isValid()) {
            resolve(null);
          } else {
          resolve(session.getIdToken().getJwtToken());
          }
        });
      });
    );
  }
}

然后在intercept 和mergeMap 中使用它：

import { mergeMap } from 'rxjs/operators';

return getToken().pipe(
  mergeMap((token) =>
  {
    request = request.clone(
    {
        setHeaders : { ... }
    });

    return next.handle(request);
  })
)