2

我正在为使用访问令牌的 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 服务会限制这些请求，因此每隔几秒或某事只能有一个。它满足此请求，并将新的访问令牌返回给所有请求以重试。

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

4

1 回答 1

0

为了解决这个问题，我创建了一个新的@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 请求接收响应的函数/动作/任何东西可以确定请求是成功还是由于身份验证失败而失败。如果是后者，它可以再次触发请求（在等待更新令牌之后）；否则，它可以以不同的方式处理另一种类型的故障。

于 2016-11-22T16:05:15.437 回答