What is the correct way to pass data between Angular components from an HTTP request using RxJS?

Question

I'm trying to create a login system for a project and I have an auth-service, token-service, and my login-component, I just started with RxJS so this is most likely an extremely stupid question.

My design was to have the token service get the token and do the HTTP requests with my backend, pass the information onto the auth-service which will determine whether the user has successfully logged in or not, this is then passed back to the login-component which will either stop the allow the user from going further into the site.

The code goes something like this in my token-service:

getToken() : any {
   return this.http.get(this.SERVER.HREF + query, requestOptions).share();
}

makeRequest() : any {
   let obsv = getToken();
   obsv.subscribe((res: Response) =>) {
     let token = res.json().data.token;
     this.http.get(this.SERVER.HREF + query, requestOptions).share(); 
     // above is that Observable that returns the data that I would like to
     // pass back to auth-service
   }
}

The auth-service is injected into the login-component and the token-service is injected into the auth-service. How do get the results of my request to the auth-service, so that it can parse it and return a boolean value to the login-component?

Answer 1

Your token service

getToken() : any {
   return this.http.get(this.SERVER.HREF + query, requestOptions);
}

makeRequest() : any {
  return this.getToken().switchMap(()=>{
     return this.http.get(this.SERVER.HREF + query, requestOptions)
});

}

your auth service, assume you have token service injected as _tokenService

this._tokenService.makeRequest().subscribe(console.log)