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

我是Angular2的新手,尝试捕获401错误以进行令牌刷新,并计划重试原始请求…

这是我的authService.refresh方法

refresh() : Observable<any> {
    console.log("refreshing token");
    this.accesstoken = null;
    let params : string = 'refresh_token=' + this.refreshToken + '&grant_type=refresh_token';
    let headers = new Headers();
    headers.append('Authorization','Basic ' + this.clientCredentials);
    headers.append('Content-Type','application/x-www-form-urlencoded');

    return Observable.create(
        observer => {
            this._http.post('http://localhost:8080/oauth/token',params,{
                    headers : headers
            })
            .map(res => res.json()).subscribe(
                (data) => {
                    this.accesstoken = data.access_token;
                    observer.next(this.accesstoken);
                    observer.complete();
                },(error) => {
                    Observable.throw(error);
                }
            );
        });
 }

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

update(index : number) {
 let headers = new Headers();
 headers.append('Authorization','Bearer ' + this._authService.accesstoken);
 this._http.get('http://localhost:8080/rest/resource',{
    headers : headers
 })
 .catch(initialError =>{
    if (initialError && initialError.status === 401) {
       this._authService.refresh().flatMap((data) => {
         if ( this._authService.accesstoken != null) {
             // retry with new token
             headers = new Headers();
             headers.append('Authorization','Bearer ' +  this._authService.accesstoken);
             return this._http.get('http://localhost:8080/rest/resource',{ headers : headers });
         } else {
         return Observable.throw(initialError);
         }
       });
    } else {
      return Observable.throw(initialError);
    }
 })
 .map(res => res.json())
 .subscribe(
    data => {
      this.resources[index] = data;
    },error => {
      console.log("error="+JSON.stringify(error));
    }
 ); 
}

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

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

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

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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...