如何暂停http请求，直到在localstorage中收到并记录令牌？

Posted 2023-03-10

【中文标题】如何暂停http请求，直到在localstorage中收到并记录令牌？

【英文标题】：How to suspend http requests until received and recorded token in localstorage?

【发布时间】：2019-09-25 20:16:42

【问题描述】：

我在 Angular 应用程序中进行授权。我通过 OAuth 获取 CODE 并将其发送到后端。后端给我一个令牌。但是当我等待令牌的接收和记录时，几个 BASE（例如菜单计数器）请求返回 401 错误。将令牌写入内存后如何保存所有请求并发送它们？

Angular 7.2.0

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
    const currentToken = localStorage.getItem('accessToken');
    if (currentToken) 
      request = request.clone(
        setHeaders: 
          Authorization: `Bearer $currentToken`
        
      )
    
    return next.handle((request));
  

我想在收到令牌后才请求数据，现在我必须刷新页面重新请求所有数据

【参考方案1】：

所有的 http 请求本质上都是异步的。所以你必须在后端调用 Token 的 subscribe 方法中调用 Menu。所有后续调用也可以在其中进行。

【参考方案2】：

从您获得令牌的服务中，您可以创建一个主题，在您设置令牌时发​​出。

export class AccessTokenService 
  private readonly accessToken = new Subject<string>();
  readonly accessToken$ = accessToken.asObservable();

  constructor() 
    // your logic to get token:
    this.getTokenFromSomewhere().subscribe(() => 
      const token = localStorage.setItem('accessToken');
      this.accessToken.next(token);
    );
  


export class CustomHttpInterceptor implements HttpInterceptor 
  constructor(readonly at: AccessTokenService) 

  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
    return this.at.accessToken$.pipe(
      mergeMap((token) => 
        const request = request.clone(
          setHeaders: 
            Authorization: `Bearer $token`
          
        );

        return next.handle(request);
      )
    );
  

您还可以在加载其他任何内容之前使用APP_INITIALIZER 设置localStorage 项。但现在是否有用取决于您的用例