CODEWITHSUNDEEP
javascriptangulartypescripthttp
wazza
wazza

Reputation: 203

Getting response headers for a get request in angular

I am trying to do a get request using basic auth and need to fetch the token from the response headers. I've gone through similar questions and am doing what was suggested there however I'm still not able to get the required header. Thanks in advance for your help.

Here is my code:

testLogin(): Observable < any > {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + btoa('username:password')
    }),
    observe: 'response'
    as 'body'
  };
  return this.http.get < any[] > ('/login', httpOptions);
}

...

this.service.testLogin().subscribe(r => {
  console.log(r.headers);
});

The following is printed on the console:

HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
lazyInit: () => {…}
lazyUpdate: null
normalizedNames: Map(0)
[[Entries]]
No properties
size: (...)
__proto__: Map
__proto__:
append: ƒ append(name, value)
applyUpdate: applyUpdate(update) { const key = update.name.toLowerCase(); switch (update.op) { case 'a': case 's': let value = update.value; if (typeof value === 'string') { value = [value]; } if (value.length === 0) { return; } this.maybeSetNormalizedName(update.name, key); const base = (update.op === 'a' ? this.headers.get(key) : undefined) || []; base.push(...value); this.headers.set(key, base); break; case 'd': const toDelete = update.value; if (!toDelete) { this.headers.delete(key); this.normalizedNames.delete(key); } else { let existing = this.headers.get(key); if (!existing) { return; } existing = existing.filter(value => {…}
clone: ƒ clone(update)
constructor: class HttpHeaders
copyFrom: copyFrom(other) { other.init(); Array.from(other.headers.keys()).forEach(key => {…}
delete: ƒ delete(name, value)
forEach: forEach(fn) { this.init(); Array.from(this.normalizedNames.keys()) .forEach(key => {…}
get: ƒ get(name)
getAll: ƒ getAll(name)
has: ƒ has(name)
init: init() { if (!!this.lazyInit) { if (this.lazyInit instanceof HttpHeaders) { this.copyFrom(this.lazyInit); } else { this.lazyInit(); } this.lazyInit = null; if (!!this.lazyUpdate) { this.lazyUpdate.forEach(update => {…}
keys: ƒ keys()
maybeSetNormalizedName: ƒ maybeSetNormalizedName(name, lcName)
set: ƒ set(name, value)
__proto__: Object

Upvotes: 1

Views: 2683

Answers (2)

sudipta shuvo
sudipta shuvo

Reputation: 19

Have you exposed the token from server-side? In your console log, there is no token I have seen. If there is a token then you can access it as like r.headers.get('token_name'). If you don't expose it from the server-side please see this problem. I may think the first two solutions can help you.

Upvotes: 1

SiddAjmera
SiddAjmera

Reputation: 39432

You have to set observe to response:

const httpOptions = {
  headers: new HttpHeaders({
    "Content-Type": "application/json",
    Authorization: "Basic " + btoa("username:password")
  }),
  observe: "response"
};

Plus, I don't think you can read all the response headers.

You can check the ones that you can read by using the response.headers.keys() method.

this.service.testLogin().subscribe(response => {
  response.headers
    .keys()
    .forEach(keyName =>
      console.log(
        `The value of the ${keyName} header is: ${response.headers.get(
              keyName
            )}`
      )
    );
});

Here's a working Sample Code on StackBlitz for your ref.

Upvotes: 2

Related Questions