Angular 4 Setting Headers with HttpClient Module

Question

im new with Angular and i'm working on a project that for some reasons i have to set headers for server side authorization, Im using Angular 4 and the HttpClient Module imported from '@angular/common/http'

This is my AuthService Class

import { Injectable } from '@angular/core';
import { User } from '../../models/user';
import { HttpClient, HttpHeaders, HttpRequest } from 
'@angular/common/http';
import { Observable } from 'rxjs';
import { Globals } from '../../utils/global';
import { Converters } from '../../utils/converters';


@Injectable()
export class AuthService {
getUserByToken(token: string): any {
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    headers.append('authorization', 'Bearer ' + token);

    console.log(headers);

    return new Promise((resolve, reject) => {
      this.http.get(this.global.urls['info'], { headers: headers }).subscribe((data) => {
        if (data != null) {
          this.converter.userJsonToObject(data).then((data: User) => {
            this.setCurrentUser(data);
            this.persistToken(data.token);
            resolve(data);
          });
        } else {
          reject('This user is not defined');
        }
      }, (err) => {
        reject(err);
      });
    });

  }

When i run my project and i call getUserByToken(token) function, the server console told me that no token was send. The endpoint is working perfect with ARC so the issue is on the client side. does anyone can help me to resolve this issue problem. :D

Answer 1

It is of type immutable Map so if you assign a new value it will reinitialize the object so you should be doing as

let headers = new HttpHeaders().set('Content-Type', 'application/json')
                               .set('authorization', 'Bearer ' + token);

or

let headers = new HttpHeaders().set('Content-Type', 'application/json');
headers = headers.set('authorization', 'Bearer ' + token);