How to return the entire HTTP response in angular to view specific response headers?

Question

I am trying to check for specific response headers in my angular app. If user attempts to access a route that requires a valid JWT, with an expired JWT, the response header from the back-end ASP.NET Core server has token-expired: true. I would like to check for that value before sending the user to the refresh route.

I have tried the following to be able to view the entire response header but I have been unsuccessful:

`public fetchPosts(): Observable<HttpResponse<Object>>  {
    var b = this.http.get<HttpResponse<Object>>('api/v1/posts', {observe: 'response'}).pipe(
      tap(resp => console.log('THE RESPONSE FOR FETCH POSTS IS:', resp))
    )
    console.log('THIS IS VALUE OF B: ', b);
    return b;
  }`

The value of b is always this :

`
Observable {_isScalar: false, source: Observable, operator: DoOperator}
post.service.ts:20
_isScalar:false
operator:DoOperator {nextOrObserver: , error: undefined, complete: undefined}
complete:undefined
error:undefined
nextOrObserver:function (resp) { … }
[[FunctionLocation]]:internal#location
[[Scopes]]:Scopes[2]
arguments:TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
caller:TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
length:1
name:""
prototype:Object {constructor: }
`

I understand that I will need to specifically expose certain response headers on my back-end server, but the fact that the b object has the error and complete keys of both undefined, makes me wonder if I am actually doing something wrong?

Any insight would be greatly appreciated.

b is an Observable. You need to learn about Observables: they're a key point of any Angular application. Why do you care about the internal structure of an Observable? It's not what matters. What matters is the Httpresponse emitted by the Observable. — JB Nizet
– JB Nizet, Commented Mar 18, 2019 at 16:03
Even though, I have tried subscribing to that observable, and trying to log its value. It never actually logs anything. The tap operator is supposed to log the actual value of the observable isn't it? The fact that the response got rejected and there is no value might have something to do with it, but then how do I get the entire response headers from a rejected or 'unauthorized' request? — O.MeeKoh
– O.MeeKoh, Commented Mar 18, 2019 at 16:07
By providing an error callback when subscribing (or in the tap() operator) — JB Nizet
– JB Nizet, Commented Mar 18, 2019 at 16:10
But that is my entire question. The rxjs operator catchError will only catch the error. I need the 'response' so I can look at its 'headers' to check for a specific header value. The error is always going to be unauthorized, but I need to take different action if its unauthorized because the token is expired or because the user has no rights to that route. Does this make sense? — O.MeeKoh
– O.MeeKoh, Commented Mar 18, 2019 at 16:14
The error is the response. angular.io/guide/http#getting-error-details — JB Nizet
– JB Nizet, Commented Mar 18, 2019 at 16:14

Dale K · Accepted Answer · 2019-03-18 20:44:00Z

1

The Http response, with its headers, is what is emitted as the error event when HttpClient receives an error response from the server, as explained in the guide. So you just need to provide an error handler when subscribing (or using tap() or catchError()).

.pipe(
    catchError(error => {
        const responseHeader = error.headers.get('<header_name>');
        if (responseHeader) {
            // send to /refresh-token route
        }
    })
)

edited Mar 18, 2019 at 20:44

Dale K

28.1k15 gold badges59 silver badges86 bronze badges

answered Mar 18, 2019 at 16:26

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Collectives™ on Stack Overflow

How to return the entire HTTP response in angular to view specific response headers?

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