Angular 6 устанавливает withCredentials в true при каждом вызове HttpClient - PullRequest
Новая
       54

Angular 6 устанавливает withCredentials в true при каждом вызове HttpClient

0 голосов
/ 16 октября 2018

Если вы хотите, чтобы учетные данные (токен проверки подлинности cookie) можно было передавать через вызов, необходимо добавить { withCredentials: true } в вызов httpclient.Примерно так: 

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

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

Я просто хотел бы знать, есть ли способ предустановки { withCredentials: true } при каждом отдельном вызове.Я не хочу добавлять { withCredentials: true } каждый раз, когда я звоню.

Вот связанный вопрос, но я не уверен, работает ли это с HttpClient?

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

У вас есть два варианта здесь -

  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);
  }
}
Перезаписать стандартный 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());
    }
}
0 голосов
/ 16 октября 2018

Создать 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 {}
...