HttpClientインターセプタでグローバル認証ヘッダーを作成する

Question

私は自分のアプリケーションでグローバル認証ヘッダーを作成しています。インターセプタを使用したので、get（）関数で承認ヘッダを宣言しません。 get（）関数を呼び出すと、トークンを依頼するので、インターセプタを正しく実装しています。それはトークンが提供されていないと言います。私のauth.interceptorに問題はありますか？すべてのget（）関数で認証ヘッダーベアラートークンを宣言する必要がありますか？リクエストが送受信されるたびにインターセプタが呼び出されたと思いますか？

auth.interceptor.ts

@Injectable() 
export class AuthInterceptor implements HttpInterceptor { 
    private authService: AuthService; 

    constructor(private injector: Injector) {} 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     // Get the auth header from the service. 
     this.authService = this.injector.get(AuthService); 
     const token = this.authService.getToken(); 
      if (token) { 
       req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) }); 
      } 

      if (!req.headers.has('Content-Type')) { 
       req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') }); 
      } 

      req = req.clone({ headers: req.headers.set('Accept', 'application/json') }); 
      return next.handle(req); 
     } 
} 

products.component.ts

getAll() { 
    return this.httpClient.get<any>(this.url).map(response => response.json()); 
    } 

Answer 1

あなたは正しい方法をやっています！

インターセプタはすべてのhttpコールをインターセプトするためのもので、グローバルなリクエストを変更できます。

私はこれらの状態での問題だと思います。それらをデバッグして解決することができます。

  if (token) { 
       req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) }); 
      } 

      if (!req.headers.has('Content-Type')) { 
       req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') }); 
      } 

多分いくつかはnullを返しています。

ただし、トークンを取得するタイミングが問題であれば、トークンを取得するために非同期呼び出しを行うことができます。

this.authService.LoginUser().subscribe((token) => { 
    if (token) { 
    req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) }); 
    } 

    if (!req.headers.has('Content-Type')) { 
    req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') }); 
    } 

    req = req.clone({ headers: req.headers.set('Accept', 'application/json') }); 
    return next.handle(req); 
} 
});