CODEWITHSUNDEEP
angularhttprxjsobservablehttpclient
mororo
mororo

Reputation: 1124

Angular HttpClient & Observables

I'm trying to write a TypeScript method for my Angular web app that simply checks the validity of a JWT token on the server with an Http call.

I want this method to return a boolean value, telling my caller if the token is valid or not. I come from C# so i would expect I can do something like this and I haven't got a clear idea of how function returns are managed in JS/TS:

verifyCanActivate(): boolean {

const actionUrl = this.apiBaseUrl + 'ValidateToken';

this.http.get(actionUrl)
    .map((data: HttpResponse<any>) => data.status === 200);}

An Http interceptor has already been set up, so every request I make is automatically decorated with header authentication info.

My server-side action for this controller is an empty ASP.NET Core WebAPI method, flagged with the [Authorize] attribute so I can easily check the validity of client tokens every time a call is made.

How do I have to write my TS method so it can return a boolean value based on the HttpResponse Status? I would also appreciate if you can provide a useful and up-to-date documentation about this topic in general.

Thank you in advance.

Upvotes: 3

Views: 155

Answers (3)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41407

In angular HttpClient return the response as an observable. You can define the data type of the observable but anyway it returns an observable. so you have to modify the return type of your method like this.

verifyCanActivate(): Observable<boolean> {

Since the Observables are asynchronous you can't directly access the values returned from the server. you need to subscribe to observable and then only we can access the data.

verifyCanActivate().subscribe( (result: boolean) => {
   console.log(result) // the boolean value
})

Upvotes: 2

tlt
tlt

Reputation: 15221

Your verifyCanActivate method should return Observable<boolean> and then when you actually use it (read, subscribe to it) you'd get your boolean value.

So, something like this:

verifyCanActivate(): Observable<boolean> {

const actionUrl = this.apiBaseUrl + 'ValidateToken';

return this.http.get(actionUrl)
    .map((data: HttpResponse<any>) => data.status === 200);
}

(notice return > you're returning this.http.get observable)

and then you use it like:

verifyCanActivate().subscribe(responseValue => console.log(returnValue));

Upvotes: 3

mahalde
mahalde

Reputation: 709

Like the other answers already said, your method returns an Observable<boolean> which you can subscribe to. But to get the status of the HttpResponse, you need to add the observe: 'response' HttpOption. Otherwise you can only view the Response - Body.

verifyCanActivate(): Observable<HttpResponse<any>> {

  const actionUrl = this.apiBaseUrl + 'ValidateToken';

  return this.http.get(actionUrl, { observe: 'response' });
}

And your Subscription should be like this:

verifyCanActivate().subscribe((response: HttpResponse<any>) => 
  response.status === 200
);

Upvotes: 0

Related Questions