每次HttpClient调用时，Angular 6将withCredentials设置为true

Question

如果希望凭据（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？

Answer 1

创建一个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 {}

Answer 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请求将通过的拦截器。

// 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());
    }
}