Angular 角度拦截器返回值超出可观测范围

我正在使用Angular 6，我正在编写一个API，它使用访问令牌作为身份验证机制。基本上，我使用拦截器在头上设置授权承载令牌，然后将其作为请求发送

起初，我将访问令牌存储在本地存储器中，并从那里获取它，将其设置为授权承载。然而，我现在正在使用IndexDB，因为我将开始与服务人员和PWA合作。所以我现在使用的是一个异步库@ngx pwa/本地存储，它将所有内容封装在可观察对象中

现在我不知道如何在函数外返回值，因为我需要在发送下一个拦截句柄之前以同步方式获取令牌。这样做的最佳方式是什么

this.localStorage.getItem('access_token').subscribe(token => {
  const cloned = req.clone({
    headers: req.headers.set('Authorization', 'Bearer ' + token)
  });
  return next.handle(cloned); // does not work
});

---

您可以尝试使用async/await关键字：

async someFunction(...){
    ....
    const token = await this.localStorage.getItem('access_token').toPromise();
    const cloned = req.clone({
        headers: req.headers.set('Authorization', 'Bearer ' + this._auth.ACCESS_TOKEN)
    });
    // Do whatever you need to with 'cloned'
}

wait关键字将强制函数的执行，直到localStorage.getItem调用完成。

因此，this.localStorage.getItem'access\u token'从IndexDB获取密钥并返回一个可观察的值。您只需等待getItem完成，然后继续执行next.handlecloned，这意味着您可以使用concatMap操作符：

return this.localStorage.getItem('access_token')
  .pipe(
    concatMap(token => {
      const cloned = req.clone({
        headers: req.headers.set('Authorization', 'Bearer ' + token)
      });
      return next.handle(cloned);
    })
  );

上面的代码将转到您的拦截器