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() 不会触发。而且我现在明白，由于可能的内存泄漏，订阅不是我想在这里使用的。我尝试使用 switchMap 和 mergeMap 但当可观察的 this.initRefreshFlag$ 发生变化时它们不会触发。

在不重构 actions/epics 中的一堆东西的情况下，我不知道如何继续这里的最佳方式。有什么建议吗？

Answer 1

我很困惑什么不适用于 switchMap 或 mergeMap 但基本上你不能 return 来自 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);
  })
)

Angular 拦截器 401 刷新令牌

Angular interceptor 401 refresh token

rxjs

angular-http-interceptors

refresh-token

angular