web-dev-qa-db-ja.com

ログインなどの一部のサービスを除外し、インターセプターから登録する方法Angular 5、HttpClient

インターセプターを使用して一部のサービスを除外したかった。

app.module.js

providers: [
    UserService,
    RolesService,
    {
        provide: HTTP_INTERCEPTORS,
        useClass: TokenInterceptor,
        multi: true
      },
],

Login.service.ts

return this.httpClient.post(this.appUrl + '/oauth/token', body.toString(), { headers, observe: 'response' })
.map((res: Response) => {
  const response = res.body;
  this.storeToken(response);
  return response;
})
.catch((error: any) => {
  ErrorLogService.logError(error);
  return Observable.throw(new Error(error.status));
  });
}
angulartypescriptinterceptorangular-httpclient
11
Haneep CR

要求されたコメントだけでなくこれに答えを出すには;-)

一部のサービス（または異なるコンポーネントで使用される同じサービス）をインターセプターから除外するには、アプリケーションをモジュールに分割し、必要なモジュールでのみインターセプターを提供するのが最善です。たとえば、ログイン後または管理領域内で。

インターセプターは、@Component宣言のprovidersプロパティ。

5
Fussel

#Fusselの回答（上記）は機能しますが、多くの場合、すべてのコンポーネントモジュールにインターセプターサービスを含めることは良い習慣ではありません。それは直感的で生産的ではありません。インターセプターを1か所に配置し、すべてのhttp要求に対応します。 1つの方法は、urlに基づいてintercept（）関数でヘッダーバインディングを除外することです。

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const re = /login/gi;
// Exclude interceptor for login request:
if (req.url.search(re) === -1 ) {
  req = req.clone({
    setHeaders: {
      Authorization: `Bearer ${localStorage.getItem('authToken')}`
    }
  });
}
return next.handle(req);

}

30
DragoRaptor

同様の問題がありました。インターセプターが実装されると、とにかくすべてのhttp要求がハントされます。私のコードには、アクセストークンがあるかどうかに関するものでした。インターセプターよりもトークンパラメーターが ""（空の文字列）に設定されている必要があります。すべてが行くよりも。インターセプターのfnコードでは、次のように見えます。

       intercept(
          request: HttpRequest<any>,
          next: HttpHandler**strong text**
       ): Observable<HttpEvent<any>> {

        //how to update the request Parameters
        **let token : string;
        let currentUser : any = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser){
            token = currentUser.access_token;
        }else{token = ""}**

        console.log("Token dobavljen sa localStorage.getItem:   ", token);
        if (token) {
            request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) });
        }

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

        request = request.clone({ headers: request.headers.set('Accept', 'application/json') });

        //logging the updated Parameters to browser's console
        console.log("Before making api call : ", token);

        return next.handle(request).pipe(
            tap(
                event => {
                    //logging the http response to browser's console in case of a success
                    if (event instanceof HttpResponse) {
                    console.log("api call success :", event);
                    }
                },
                error => {
                    //logging the http response to browser's console in case of a failuer
                    if (event instanceof HttpResponse) {
                    console.log("api call error :", event);
                    }
                }
            )
        );
    //}
}
0
Dejan Jovancevic