Angular2-Token not sending headers

Question

I just finished setting up Angular2-Token auth and from what I see in the docs, it should be sending client uid expiry and token in the headers of every request, but I'm noticing I am always getting my default Sign In response on the back-end.

My Angular(4) Service is simple.

export class ClientService {

  constructor(private http: Http) { }

  private clientsUrl = 'baseUrl/clients';

  getClients() : Observable<Client[]> {
    return this.http.get(this.clientsUrl)
      .map((res: Response) => res.json())
      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

  };

And in the Component:

export class ClientComponent implements OnInit {

  constructor(private clientService: ClientService) { }
  clients: Client[];

  ngOnInit() {
    this.getClients();
  }

  getClients() {
    this.clientService.getClients()
      .subscribe(
        clients => this.clients = clients,
        err => {
          console.log(err);
        }
      );
  }

}

I also have a generic model including timestamps + ID because I'm unsure how it will handle the response.

export class Client {
  constructor(
    id: number,
    name: string,
    status: string,
    logo: string,
    user_id: number,
    created_at: Date,
    updated_at: Date
  ){}
}

I have tested the endpoint in POSTMAN and the response is as I expect. I send it access_token client and uid in the headers, and it auth's no problem.

When I check the Network I don't see the headers being passed in the request.

GET /clients HTTP/1.1
Host: baseUrl
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Referer: http://localhost:8080/clients
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8

I was looking into how to prepend them to -every- single call, but I think Angular2-Token is supposed to solve for it as explained in this issue

Am I going about this improperly, or will I have to make some sort of interceptor to prepend all headers?

Updated Code

Thanks the comment below, I realized I need to pass the headers. I have modified it to work with the snippet below, but Angular2-Token is supposed to automatically send the headers. Should I follow JWT-Token logic or Angular2-token?

 getClients() : Observable<Client[]> {
let headers = new Headers({
  'Content-Type': 'application',
  'access-token': localStorage.getItem('accessToken'),
  'client': localStorage.getItem('client'),
  'uid':localStorage.getItem('uid')
});
let options = new RequestOptions({ headers: headers});

return this.http.get(this.clientsUrl, options)
  .map((res: Response) => res.json())
  .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

};

you are missing RequestOptions in the http call this.http.get(this.clientsUrl,options) you should be adding the token to the header — Aravind
@Aravind Thanks for this - That's a completely fair point. I did it and it is not passing 'application' as the content-type, over-writing the default ones, however it still isn't auto sending the Angular2-Token headers as it should. — DNorthrup
@Aravind I updated my question after your comment with how I changed the code. — DNorthrup

DNorthrup DNorthrup · Accepted Answer · 2017-08-20T20:26:14

For anyone who comes across this, my issue was that I wasn't using the HTTP Wrapper provided by Angular2-Token.

This actually made it extremely simple for me to ensure proper tokens, and no repetitive headers.

  constructor(private authToken: Angular2TokenService) {
  }

  getClients(): Observable<Client[]> {
    return this.authToken.get('clients')
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  };

  addClient(client:Client): Observable<Client> {
    return this.authToken.post('clients', client)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  getClientById(id): Observable<Client> {
    return this.authToken.get('clients/' + id)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  deleteClient(id): Observable<Client> {
    return this.authToken.delete('clients/' + id)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  editClientById(client:any): Observable<Client> {
    return this.authToken.patch('clients/' + client.id, client)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

As long as you have the baseApi stated in the init this will simplify the process.

Angular2-Token not sending headers

2 Answers