Angular 拦截器 401 刷新令牌

Question

好的，这应该是一件容易解决的事情，但由于应用程序之前的设计方式，它有点复杂。我找到的大多数答案都不适用于我要解决的问题。

基本上，我拦截 API 调用，当出现 401 时，我想获取一个新令牌。这个应用程序的设计方式是，我可以调用一个异步操作来启动 API 调用以获取新令牌。然后它将该令牌保存在 localStorage 中。商店中有一个标志可以跟踪此过程的进度。所以现在我必须听 observable 并在它完成后从 localStorage 中获取新令牌，然后再次调用。

类似这样的：

this.initRefreshFlag$.subscribe((val, i) => {
    if (val === InitFlagType.Done) {
        const newRequest = request.clone({
            setHeaders: {
                'Authorization':
                `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(ACCESS_TOKEN_KEY)}`
            }
        });
        return next.handle(newRequest);
    }
});

但是，next.handle() 不会触发。而且我现在明白，由于可能存在内存泄漏，我不想在这里使用 subscribe 。我尝试使用 switchMap 和 mergeMap 但当可观察的 this.initRefreshFlag$ 更改时它们不会触发。

我不知道如何在不重构动作/史诗中的一堆东西的情况下继续进行。有什么建议吗？

Answer 1

我对 switchMap 或 mergeMap 不起作用的东西感到困惑，但基本上你不能从 subscribe() 返回任何东西。

一般来说，如果你想执行一个 Observable，然后使用它的值来继续另一个 Observable，你可以使用 mergeMap:

this.initRefreshFlag$.pipe(
  mergeMap(val => {
    const newRequest = request.clone({
      setHeaders: {
        'Authorization': `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(ACCESS_TOKEN_KEY)}`
      }
    });

    return next.handle(newRequest);
  })
)