HttpInterceptor + Angular 5 및 HttpClient

Question

문제점이 있습니다. API HTTP 요청에 Token을 추가하고 싶습니다. 내 토큰을 얻으려면 http 요청을합니다. 여기 내 코드 :

HttpInterceptor :

@Injectable() 
export class TokenInterceptor implements HttpInterceptor { 
constructor(private inj: Injector) { } 

getRequestWithAuthorization(request: HttpRequest<any>):any 
{ 
    let token:String ; 
    this.inj.get(CnafUserService).getTokenJWTObservable().subscribe(data => { 
     token = data ; 
     request = request.clone({ headers: request.headers.set('Authorization', `${token}`) }); 
     return request; 
    }) 
} 
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    //Ajout du header Authorization 
    if (request && request.url.match("^/api/")) 
    { 
     //Here the problem, request is null because the call is asynchronous 
     request = this.getRequestWithAuthorization(request,next); 
     return next.handle(request); 
    } 
    return next.handle(request); 
} 

}

서비스 : 내가 토큰을 얻을 요구하고 헤더 요청을 반환하는 방법,

getTokenJWTObservable(): Observable<any> { 
     return this.http.get(this.urlServletJwt); 
    } 

? 당신의 도움이 내가이 솔루션을 시도하지 않은

Answer 1

에 대한

감사합니다, 그래서 내가 잘못 여기있어 경우에 저를 정정 주시기 바랍니다.

문제는 내부에서 뭔가를 얻으려고해도 getRequestWithAuthorization 함수가 반환하지 않는 것 같습니다. 요청이 더 이상 전달되지 않습니다

getRequestWithAuthorization(request: HttpRequest<any>):any 
{ 
    let token:String ; 
    this.inj.get(CnafUserService).getTokenJWTObservable().subscribe(data => { 
     token = data ; 
     request = request.clone({ headers: request.headers.set('Authorization', `${token}`) }); 
     // this will only return the request to the subscribe call 
     // but not the calling function itself 
     return request; 
    }) 
    // no return value here 
} 

당신은 단지 구독 기능의 요청을 반환하고 있지만 내부 함수로 (적어도 그게 내 이해입니다). 현재 요청에 대해 아무 것도하지 않습니다.

This question here와 비슷한 문제입니다. 우리가 궁극적으로 반환하고자하는 것은 관찰 할 수있는 next.handle(request)입니다. 우리가 그렇게하기 전에 관찰 할 수있는 토큰에 대한 요청을 수행해야합니다. 마지막으로 올바른 관찰 가능을 반환하기 위해 우리는 switchMap 연산자를 사용합니다. 토큰을 가져와 관찰 가능한 결과를 사용하여 요청을 변경하고 the next.handle(request)을 반환합니다. 나는 이것이 이렇게 보일 것이라고 생각한다.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    if(request && request.url.match("^/api/")) { 
     // we have to return this block which after the flatMap operator will return the next.handle(request) 
     return this.inj.get(CnafUserService).getTokenJWTObservable().switchMap((token) => { 
      // we use the output from your tokenRequest to clone the current request 
      const newRequest = request.clone({ headers: request.headers.set('Authorization', `${token}`) }); 
      return next.handle(newRequest); 
     }) 
    } 
    return next.handle(request); 
} 

은 내가 아는 한 그것은 switchMap 작업의 관찰 소스를 고려 때문에 getTokenJWTObservable에 가입 할 필요가 없습니다. In an angular blog post 이렇게 설명되어 있습니다.

우리는 결과를 관찰 가입 한 경우

, 그 관찰 가능한 소스에 가입을 트리거

내가 somwhere 당신의 요격 흐름에 가입이됩니다 반환 관찰하게 될 것 같아요 따라서 토큰에 대한 get 요청을 트리거 할 수도 있습니다.