Angular4 move from Http to HttpClient - use credentials

Question

We were using HttpModule in angular.

Now we moved to HttpClient as we heard it is better to use it.

All is working fine, BUT - when we used HttpModule we had this piece of code to make chrome send the credentials to the server.

constructor(private http:Http){
  let _build = (<any>this.http)._backend._browseXHR.build;
  (<any>this.http)._backend._browseXHR.build = () => {
       let _xhr = _build();
       _xhr.withCredentials = true;
       return (_xhr);
       };
}

We had to write this only one time in the first service, and all our services were using credentials.

Now we are unable to "convert" this code if we are using HttpClient.

We know we can send in each call the withCredentials:true, but we want something like what we had, that one place is enough for all calls.

What is the parallel code to the above if using HttpClient?

writing a parallel code might take some time, meanwhile you can try using the interceptor concept provided in new HttpClient. It has a similar functionality. — Sumit Agarwal
– Sumit Agarwal, Commented Nov 20, 2017 at 13:56
@Batsheva I came across the same issue, did you solve it? If so, can you post the solution? Thanks. — Ng2-Fun
– Ng2-Fun, Commented Jan 3, 2018 at 21:35

Sunny Sharma · Accepted Answer · 2019-12-31 09:52:26Z

1

So, in the end we just created a base service that all the services are using this one.

Base Service:

@Injectable()
export class BaseService{
   options:any;

   constructor(private http:HttpClient){
       this.options = new HttpHeaders().set('Content-Type', 'application/json');
   }

   get(url){
      return this.http.get(url,{withCredentials:true})
           .catch(err => err);
   }

   post(url, obj){
      return this.http.post(url, obj, {headers: this.options, withCredentials:true})
           .catch(err => err);
   }
}

Example to use of base service in a service:

@Injectable()
export class CarService{

   constractor(private baseService:BaseService){}

   getCarDetails(carNumber:number){
       let url = `${BASE_URL}/GetCar/${carNumber}`;
       return this.baseService.get(url);
   }

   updateCar(carDetails:Car){
       let url = `${BASE_URL}/UpdateCar`;
       return this.baseService.post(url, carDetails);
   }
}

edited Dec 31, 2019 at 9:52

Sunny Sharma

5,0045 gold badges41 silver badges77 bronze badges

answered Jan 4, 2018 at 7:55

Batsheva

6795 gold badges13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular4 move from Http to HttpClient - use credentials

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related