Question

我是新來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)); 
    } 
); 
} 

這並不是出於某種原因... 我不知道什麼是正確的implem令牌刷新功能在angular2中的引入？ enter code here

Answer 1

沒有必要使用Observable.create(

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

只是不叫.subscribe()（這將返回Subscription而不是Observable，改用.map(...)和.catch(...)

Answer 2

除了岡特的回答，我會利用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/