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 请求。他们都 return 401 错误。他们都触发了 refreshLogin() 函数。一个 refreshLogin() 成功并存储一个新的访问令牌；另一个失败是因为用于刷新的令牌不再有效。这个函数流现在失败了，导致我的应用程序停止。

一种解决方案是按顺序堆叠我的 GET 请求，但这似乎并非必须如此。

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

您认为这是一种明智的方法，还是我只是想修补一种开始时考虑不周的方法？您建议如何使这些部分相互作用？

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请求响应的function/action/whatever可以判断请求是成功还是因为认证失败而失败。如果是后者，它可以再次触发请求（在等待更新的令牌之后）；否则，它可以以不同的方式处理另一种类型的故障。

Angular 2 处理多个需要授权令牌刷新的失败请求

Angular 2 dealing with multiple failed requests requiring an auth token refresh

authentication

angular

angular2-observables