如何以角度实现刷新令牌？答案

【问题标题】：How to implement refresh tokens in angular?如何以角度实现刷新令牌？
【发布时间】：2020-02-08 02:28:15
【问题描述】：

我正在尝试在我的 Angular 应用程序中实现刷新令牌。我编写了一个 http 拦截器，每当我收到 401 错误时，它都会尝试获取新的访问令牌。我不知道为什么，但这不起作用。我仍然收到 401 响应。

【问题讨论】：

标签： angular angular-http-interceptors refresh-token

【解决方案1】：

您需要检查响应代码是否为 401，然后请求刷新令牌，并在收到响应进程挂起请求后等待响应。 refresh token with http interceptor

【讨论】：

【解决方案2】：

如果需要，在请求之前生成 refreshToken

export class HttpRequestInterceptor implements HttpInterceptor {
constructor(private router: Router, private service: AuthService) { }

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<any> {

    return from(this.tokenHandler(request)).pipe(mergeMap((req: HttpRequest<any>) => {
        return next.handle(req).pipe(catchError(err => {
            if ([401].indexOf(err.status) != -1) {
                // auto logout if 401 response returned from api
            }                
            else {                    
                throw err;
            }

            return EMPTY;
        }));
    }));
}

private async tokenHandler(request: HttpRequest<any>): Promise<HttpRequest<any>> {
    if (request.url.indexOf("REFRESHTOKEN_URL") == -1) {
        await this.service.GenerateNewTokenIfNeed(); //Important this function would be async and put httpClient call to ToPromise() and await it. Save token somewhere and get from there to #token# place
    }
    else {
        //RefreshTokenRequest
    }

    const authReq = request.clone({
        setHeaders: {
            Authorization: "Bearer #token#"
        },
    });

    return authReq;
}

【讨论】：