typescript – Angular2:令牌刷新时捕获401错误

前端之家收集整理的这篇文章主要介绍了typescript – Angular2:令牌刷新时捕获401错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是Angular2的新手,尝试捕获401错误以进行令牌刷新,并计划重试原始请求…

这是我的authService.refresh方法

  1. refresh() : Observable<any> {
  2. console.log("refreshing token");
  3. this.accessToken = null;
  4. let params : string = 'refresh_token=' + this.refreshToken + '&grant_type=refresh_token';
  5. let headers = new Headers();
  6. headers.append('Authorization','Basic ' + this.clientCredentials);
  7. headers.append('Content-Type','application/x-www-form-urlencoded');
  8.  
  9. return Observable.create(
  10. observer => {
  11. this._http.post('http://localhost:8080/oauth/token',params,{
  12. headers : headers
  13. })
  14. .map(res => res.json()).subscribe(
  15. (data) => {
  16. this.accessToken = data.access_token;
  17. observer.next(this.accessToken);
  18. observer.complete();
  19. },(error) => {
  20. Observable.throw(error);
  21. }
  22. );
  23. });
  24. }

然后我尝试在我的组件方法中使用刷新功能

  1. update(index : number) {
  2. let headers = new Headers();
  3. headers.append('Authorization','Bearer ' + this._authService.accessToken);
  4. this._http.get('http://localhost:8080/rest/resource',{
  5. headers : headers
  6. })
  7. .catch(initialError =>{
  8. if (initialError && initialError.status === 401) {
  9. this._authService.refresh().flatMap((data) => {
  10. if ( this._authService.accessToken != null) {
  11. // retry with new token
  12. headers = new Headers();
  13. headers.append('Authorization','Bearer ' + this._authService.accessToken);
  14. return this._http.get('http://localhost:8080/rest/resource',{ headers : headers });
  15. } else {
  16. return Observable.throw(initialError);
  17. }
  18. });
  19. } else {
  20. return Observable.throw(initialError);
  21. }
  22. })
  23. .map(res => res.json())
  24. .subscribe(
  25. data => {
  26. this.resources[index] = data;
  27. },error => {
  28. console.log("error="+JSON.stringify(error));
  29. }
  30. );
  31. }

由于某些原因,这不起作用……
我想知道angular2中令牌刷新功能的正确实现是什么?在这里输入代码

除了Günter的答案,我还会利用flatMap回调参数中的accessToken而不是使用服务属性
  1. if (initialError && initialError.status === 401) {
  2. this._authService.refresh().flatMap((accessToken) => {
  3. // retry with new token
  4. headers = new Headers();
  5. headers.append('Authorization','Bearer ' + accessToken);
  6. return this._http.get('http://localhost:8080/rest/resource',{
  7. headers : headers });
  8. });
  9. } else {
  10. return Observable.throw(initialError);
  11. }

本文可能会引起您的兴趣(“处理安全性”部分):

> http://restlet.com/blog/2016/04/18/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-3/

猜你在找的Angularjs相关文章