Angular 2 处理需要身份验证令牌刷新的多个失败请求

Question

我正在为使用访问令牌的 API 制作 Angular 2 前端。我正在尝试使用 observables 和 ngrx/store。

登录和注销工作正常且符合预期。我还编写了一些代码来处理由于令牌过期而导致请求失败的情况。这段代码通常可以正常工作，但是当我在短时间内有多个请求时会遇到麻烦。例如，当我刷新页面并且应用尝试填充整个应用所需的两个或三个商店时，就会发生这种情况。

---

我的身份验证服务具有以下功能：

refreshLogin(): Observable<any> {
    const username = this.currentUser();
    let query = new URLSearchParams();
    query.set('refresh_token', this.refreshToken());
    query.set('grant_type', 'refresh_token');
    return this.getToken(username, query.toString());
}

private getToken(username: string, body: string): Observable<any> {
    const url = Config.AUTH_TOKEN_PATH;
    return this.http.post(url, body)
        .map((res: Response) => res.json())
        .do(
            (data) => {
                const token = {
                    username: username,
                    accessToken: data.access_token,
                    refreshToken: data.refresh_token,
                    tokenType: data.token_type,
                    expiresIn: data.expires_in
                };
                this.store.dispatch(AuthActions.loginSuccess(token));
            },
            error => {
                const description = error.json().error_description;
                this.store.dispatch(AuthActions.loginError(description));
                console.error(error);
            }
        )
    ;
}

我的 REST 函数有这样一个函数：

get(url: string): Observable<any> {
    return this.http.get(url, new RequestOptions({ headers: this.authHeader() }))
        .catch(err => {
            if (err.status === 401) {
                return this.auth.refreshLogin()
                    .switchMap(() => this.http.get(url, new RequestOptions({ headers: this.authHeader() })))
                    .catch(err2 => err2);
            } else {
                console.log(err);
            }                
        })
        .map((res: Response) => res.json())
    ;
}

我不认为需要 currentUser()、refreshToken() 和 authHeader() 函数来理解我的问题。

---

如果我有一个失败的请求并且错误是 401，我的应用会调用 refreshLogin()，获取新的访问令牌并存储它，然后使用新的访问令牌再次尝试原始请求。

如果我有多个失败的请求，并且它们同时有效地发生，我就会遇到问题。例如，假设我有两个 GET 请求。它们都返回 401 错误。它们都触发了refreshLogin() 函数。一个refreshLogin() 成功并存储一个新的访问令牌；另一个失败，因为用于刷新的令牌不再有效。这个函数流现在失败了，导致我的应用程序停止。

一种解决方案是将我的 GET 请求串联堆叠，但似乎并非必须如此。

我觉得应该有一个解决方案，在失败的 GET（或其他）请求中，应用程序会触发刷新访问令牌的调用。 auth 服务会限制这些请求，因此每隔几秒或某事只能有一个。它满足了这个请求，并将新的访问令牌返回给所有请求以重试。

您认为这是一种明智的方法，还是我只是想修补一种一开始就被错误考虑的方法？您建议如何让这些部分交互？

Answer 1

为了解决这个问题，我创建了一个新的@ngrx/store 操作来刷新我的令牌并使用@ngrx/effects 使用它。我知道不是每个人都想使用效果，但我发现它在很多场景中都非常有用，而不仅仅是这个。

所以我的 REST get 函数现在看起来像这样：

get(url: string): Observable<any> {
    return this.http.get(url, new RequestOptions({ headers: this.authHeader() }))
        .catch(err => {
            if (err.status === 401) {
                this.store.dispatch({type: 'REFRESH TOKEN'});
            }
            return Observable.of(err);
        })
        .map((res: Response) => res.json())
    ;
}

这个动作被我的效果模块拾取...

@Effect() refreshToken$ = this.actions$
    .ofType('REFRESH TOKEN')
    .throttleTime(3000)
    .switchMap(() => this.authService.refreshLogin())
    .map((response) => {
        // Store token
    })

同时，从 REST get 请求接收响应的函数/操作/任何东西都可以确定请求是成功还是由于身份验证失败而失败。如果是后者，它可以再次触发请求（在等待更新令牌之后）；否则，它可以以不同的方式处理另一种类型的故障。