我正在尝试实现401响应的捕获并尝试获取基于Angular 4 Interceptor retry requests after token refresh的刷新令牌 . 我试图实现同样的事情,但我从来没有能够重试该请求,我真的不确定这是否是应用刷新令牌策略的最佳方法 . 这是我的代码:
@Injectable()
export class AuthInterceptorService implements HttpInterceptor {
public authService;
refreshTokenInProgress = false;
tokenRefreshedSource = new Subject();
tokenRefreshed$ = this.tokenRefreshedSource.asObservable();
constructor(private router: Router, private injector: Injector) { }
authenticateRequest(req: HttpRequest<any>) {
const token = this.authService.getToken();
if (token != null) {
return req.clone({
headers: req.headers.set('Authorization', `Bearer ${token.access_token}`)
});
}
else {
return null;
}
}
refreshToken() {
if (this.refreshTokenInProgress) {
return new Observable(observer => {
this.tokenRefreshed$.subscribe(() => {
observer.next();
observer.complete();
});
});
} else {
this.refreshTokenInProgress = true;
return this.authService.refreshToken()
.do(() => {
this.refreshTokenInProgress = false;
this.tokenRefreshedSource.next();
}).catch(
(error) => {
console.log(error);
}
);
}
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.authService = this.injector.get(AuthenticationService);
request = this.authenticateRequest(request);
return next.handle(request).do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// do stuff with response if you want
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
if (err.status === 401) {
return this.refreshToken()
.switchMap(() => {
request = this.authenticateRequest(request);
console.log('*Repeating httpRequest*', request);
return next.handle(request);
})
.catch(() => {
return Observable.empty();
});
}
}
});
}
}
问题是从未到达过SwitchMap ...
if (err.status === 401) {
return this.refreshToken()
.switchMap(() => {
以及do运营商......
return this.authService.refreshToken()
.do(() => {
所以我带到了我的authService refreshToken方法......
refreshToken() {
let refreshToken = this.getToken();
refreshToken.grant_type = 'refresh_token';
refreshToken.clientId = environment.appSettings.clientId;
return this.apiHelper.httpPost(url, refreshToken, null)
.map
(
response => {
this.setToken(response.data, refreshToken.email);
return this.getToken();
}
).catch(error => {
return Observable.throw('Please insert credentials');
});
}
}
它返回一个映射的observable,我知道如果我替换了do in,它需要订阅...
return this.authService.refreshToken()
.do(() => {
With subscribe I'll break the observable chain I guess. I am lost and I've playing with this for a long time without a solution. :D
1 回答
我想在这里提出最终的解决方案,但是如果有人想知道我休会的过程请到这里:Refresh Token OAuth Authentication Angular 4+
好的,首先我创建了一个服务来保存 refresh token request 和Observable的状态,以便知道请求何时完成 .
这是我的服务:
这是用于刷新令牌的拦截器:
所以在这里我等待刷新令牌可用或失败,然后我发布需要授权头的请求 .
这是放置授权标头的拦截器:
我的主要模块是这样的:
请欢迎任何反馈,如果我用 Angular 4.4.6 进行测试,但我不知道它是否适用于角度5,我认为应该可行 .