angular - 使用 NGRX 刷新 token 拦截器

Question

所以我创建了一个刷新 token http 拦截器，它从 API 中查找 401 错误，然后尝试刷新用户 token 。

那里有很多教程，这里也有很多关于如何处理 token 刷新的教程，但是，即使不是全部，也有很多教程只是在拦截器中使用服务，而我想使用 NGRX 来分派(dispatch)操作。

我的操作(见下文)很简单，REFRESH_TOKEN 触发一个调用 API 端点的效果，该端点有望为用户返回一个新 token (我还有其他效果来处理成功/失败该操作，相应地重定向或保存数据)。

我对拦截器的第一次尝试:

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.loaded$ = this.auth.pipe(select(selectAuthLoaded));
        this.loading$ = this.auth.pipe(select(selectAuthLoading));

        // @ts-ignore
        return next.handle(request).pipe(catchError(error => {
            if (error instanceof HttpErrorResponse && error.status === 401) {
                return this.handle401Error(request, next);
            } else {
                return throwError(error);
            }
        }));
    }

    private handle401Error(request: HttpRequest<any>, next: HttpHandler) {
        this.loading$.subscribe(isLoading => {
            this.storage.getItem('refresh_token').subscribe(refreshToken => {
                if (!isLoading && refreshToken) {
                    this.auth.dispatch(new RefreshToken(refreshToken));
                } else {
                    return next.handle(request);
                }
            });
        });
    }

}

我在这里的想法是，如果是 401，则运行 handle401ERror 函数。这首先检查是否加载了 auth 状态，并从本地存储获取用户刷新 token (这很糟糕，一旦我确定它就会更改为 COOKIE)，如果加载了 auth 并且有刷新 token ，则发送REFRESH_TOKEN 操作。

这似乎会导致以下错误:

You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Answer 1

我也遇到过这个问题。在我找到更好的解决方案之前，我只是利用了效果本身。我不确定这是否符合答案，但这是我到目前为止使用的代码:

if (error.msg === 'invalid_token') {
  this.authService.dispatch(fromAuthStore.refreshToken());
  return this.authEffects.refreshTokenSuccess$.pipe(
    take(1),
    mergeMap(() => {
      return next.handle(this.setRequest(req));
    })
  );
} else {
  return throwError(error);
}

希望对你有帮助

编辑:这是一个链接，可能会提供更多解释并提供替代方案。基本上，你最终会听到 ngrx。 https://netbasal.com/listening-for-actions-in-ngrx-store-a699206d2210