Clash Royale CLAN TAG#URR8PPP

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.

boolean

HttpResponse

Thank you in advance.

[Authorize]

[Authorize]

401

3 Answers
3

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

verifyCanActivate

Observable<boolean>

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)

this.http.get

and then you use it like:

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


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
)


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.

Observable<boolean>

HttpResponse

observe: 'response' HttpOption

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
);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.