web-dev-qa-db-ja.com

Angular 6 HttpClient呼び出しごとにwithCredentialsをtrueに設定

資格情報（Cookie認証トークン）を呼び出しで渡せるようにする場合は、httpclient呼び出しに{ withCredentials: true }を追加する必要があります。このようなもの：

import { HttpClient  } from '@angular/common/http';
...
constructor(private httpclient: HttpClient) { }

this.httpclient.get(url, { withCredentials: true })

すべての呼び出しで{ withCredentials: true }を事前設定する方法があるかどうかを知りたいだけです。電話をかけるたびに{ withCredentials: true }を追加する必要はありません。

これは関連する質問ですが、これがHttpClientで機能するかどうかはわかりません。

angularhttpapache-commons-httpclient
4
Freddy Bonda

HttpInterceptorを作成します

@Injectable()
export class CustomInterceptor implements HttpInterceptor { 

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

        request = request.clone({
            withCredentials: true
        });

        return next.handle(request);
    }
}

@NgModule({
  bootstrap: [AppComponent],
  imports: [...],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomInterceptor ,
      multi: true
    }
  ]
})
export class AppModule {}
10
Sachila Ranawaka

ここには2つのオプションがあります-

  1. HttpInterceptor

auth.service.ts

現在または後で認証情報の検証が必要な標準アプリケーションを作成している場合は、AuthServiceが必要です。ただし、必要に応じて今は無視できます。

// src/app/auth/auth.service.ts
import { Injectable } from '@angular/core';
import decode from 'jwt-decode';
@Injectable()
export class AuthService {
  public getToken(): string {
    return localStorage.getItem('token');
  }
  public isAuthenticated(): boolean {
    // get the token
    const token = this.getToken();
    // return a boolean reflecting 
    // whether or not the token is expired
    return tokenNotExpired(null, token);
  }
}

app.module.ts

提供HTTP_INTERCEPTORSは、あなたのリクエストをすべて遮断します。

   // src/app/app.module.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './../auth/token.interceptor';
@NgModule({
  bootstrap: [AppComponent],
  imports: [...],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

token.interceptor.ts

これは、各HTTPリクエストが通過するInterceptorです。

// src/app/auth/token.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { AuthService } from './auth/auth.service';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}
  1. 標準のHttpClientを上書きする

app.module.ts

    @NgModule({
        providers: [ // expose our Services and Providers into Angular's dependency injection
            {provide: HttpClient, useClass: ExtendedHttpService},
        ]
    })
    export class AppModule {
}

extended-http.service.ts

import {Injectable, Injector} from '@angular/core';
import {Request, XHRBackend, RequestOptions, Response, Http, RequestOptionsArgs, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Router} from '@angular/router';
import {AuthService} from './auth.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class ExtendedHttpService extends HttpClient {
    private router: Router;
    private authService: AuthService;

    constructor(backend: XHRBackend, defaultOptions: RequestOptions, private injector: Injector) {
        super(backend, defaultOptions);

    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {

        if (typeof url === 'string') {
            if (!options) {
                options = {headers: new Headers()};
            }
            this.setHeaders(options);
        } else {
            this.setHeaders(url);
        }
        //console.log("url: " , url , ", Options:" , options);
        return super.request(url, options).catch(this.catchErrors());
    }

    private catchErrors() {

        return (res: Response) => {
            if (this.router == null) {
                this.router = this.injector.get(Router);
            }
            if (res.status === 401 || res.status === 403) {
                //handle authorization errors
                //in this example I am navigating to login.
                console.log("Error_Token_Expired: redirecting to login.");
                this.authService.logout();
            }
            return Observable.throw(res);
        };
    }

    private setHeaders(objectToSetHeadersTo: Request | RequestOptionsArgs) {

        if (this.authService == null) {
            this.authService = this.injector.get(AuthService);
        }
        //add whatever header that you need to every request
        //in this example I could set the header token by using authService that I've created
        objectToSetHeadersTo.headers.set('Authorization', this.authService.getAuthToken());
    }
}
1
Sunil Singh