使用攔截器在Angular 4.3中重新嘗試使用新標頭的Http請求

Question

如何使用新標頭處理克隆請求？

我想在第一個請求失敗後生成的新令牌在新的攔截器中執行克隆請求！

• 如果犯錯401 - >刷新令牌
• 發回具有新標題

這裏是我的嘗試以前的請求的副本：

refreshSessionToken() { 
    return this.http.post('/connect', {}) 
     .map(res => { 
     const token = res.json(); 
     localStorage.setItem('token', token); 
     return token; 
     }); 
    } 


// Get the headers 
const headers = getAuthenticationHeaders(); 
const reqMain = req.clone({headers: headers}); 
return next.handle(reqMain).catch(err => { 

     this.refreshSessionToken() 
      .subscribe(token => { 
       const t = token.token_id; 
       const clonedReq = req.clone({headers: req.headers.set('access-token', t)}); 

       return next.handle(clonedReq); 
        }); 
     }) 

得到一個日誌clonedReq我可以看到該令牌已刷新，但訂閱內的請求（clonedReq）未執行，爲什麼？！

我嘗試了其他方法來刷新智威湯遜，但它似乎並沒有在我的情況下工作，對如何處理它的任何幫助？

謝謝！

我的結果是什麼？

• 發送1＃HTTP請求
• 1＃請求失敗
• 刷新令牌（獲取/設置令牌）
• 克隆先前請求並添加刷新令牌
• 發送2＃HTTP請求
• 2＃請求成功

Simil IAR問題：

http-interceptor-refresh-jwt-token

Answer 1

繼通用方法可用於攔截以及添加/刪除附加信息調用和響應。

好的，這裏是完整的代碼。

InterceptedHttp.ts

---

import { Injectable } from "@angular/core"; 
import { RequestOptions, Http, Headers, Response, RequestMethod, URLSearchParams } from "@angular/http"; 
import { Observable, Observer } from 'rxjs/Rx'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import "rxjs/add/operator/mergeMap"; 

@Injectable() 
export class InterceptedHttp { 

    constructor(private http: Http) { } 

    getRequestOption(method: RequestMethod | string, data?: any, params?: any): RequestOptions { 
     let options = new RequestOptions(); 
     options.headers = new Headers(); 
     //options.headers.append('Content-Type', 'application/json'); 
     options.method = method; 

     let token: string = localStorage.getItem('token'); 
     //if (token) options.headers.append('Authorization', 'Bearer ' + token); 

     if (data) options.body = data; 

     if (params) { 
      options.search = new URLSearchParams(); 
      let keys: string[] = Object.keys(params); 

      keys.forEach((key, index) => { 
       options.search.set(key, params[key]); 
      }); 
     } 

     return options; 
    } 

    refreshSessionToken(): Observable<string> { 
     //Put some user identification data 
     let userData: any = {id: 'abc'}; 
     return this.http.post('/refreshToken', userData) 
      .map(res => { 
       let token = res.json(); 
       localStorage.setItem('token', token); 
       return token; 
      }); 
    } 

    getApiResponse<T>(url: string, method: RequestMethod | string, data?: Object): Observable<T> { 
     let op1: RequestOptions = this.getRequestOption(method, data); 
     return this.http.request(url, op1) 
      .catch((err) => { 
       // UnAuthorised, 401 
       if (err.status == 401) { 
        return this.refreshSessionToken().flatMap(t => { 
         let op2 = this.getRequestOption(method, data); 
         return this.http.request(url, op2); 
        }); 
       } 
       throw err; 
      }) 
      .map((response: Response) => { 
       let ret: T = response.json(); 
       return ret; 
      }); 
    } 

    get<T>(url: string): Observable<T> { 
     return this.getApiResponse<T>(url, RequestMethod.Get); 
    } 

    post<T, R>(url: string, body: T): Observable<R> { 
     return this.getApiResponse<R>(url, RequestMethod.Post, body); 
    } 

    put<T, R>(url: string, body: T): Observable<R> { 
     return this.getApiResponse<R>(url, RequestMethod.Put, body); 
    } 

    delete<T>(url: string): Observable<T> { 
     return this.getApiResponse<T>(url, RequestMethod.Delete); 
    } 
} 

---

DataService.ts

import { Injectable } from '@angular/core'; 
    import { Observable } from 'rxjs/Observable'; 
    import { User } from './User'; 
    import { InterceptedHttp } from './http.interceptor'; 

    @Injectable() 
    export class DataService { 
     constructor(private apiHandler: InterceptedHttp) { } 

     getAll(): Observable<User[]> { 
      return this.apiHandler.get<User[]>('http://mocker.egen.io/users'); 
     } 
    } 

---

用戶。TS

export class User { 
     id?: number; 

     firstName?: string; 

     lastName?: string; 
    } 

---

AppComponent.ts

import { Component } from '@angular/core'; 
    import { DataService } from './user-data.service'; 
    import { User } from './User'; 

    @Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent { 
     title = 'app works!'; 
     users: User[]; 

     constructor(dataService: DataService){ 
     dataService.getAll().subscribe((u) => { 
      this.users = u; 
     }); 
     } 
    } 

---

app.component.html

<h1> 
    <table> 
    <tr *ngFor="let item of users; let i = index"> 
     <td> {{item.firstName}} </td> 
    </tr> 
    </table> 
</h1> 

Answer 2

我回答了類似的問題here

您無法將克隆的請求傳遞到下一個處理程序。相反，使用HttpClient重新嘗試克隆的請求。

this.http.request(clonedReq).subscribe(......);