Angular 4 HTTP GET not including JWT for Authorization in HTTP Header

Question

Challenge

An Angular module sends JWT tokens to the server with a GET request in order to authenticate that the user is logged in, with the purpose of retrieving their data.

Source of problem(?)

The module in question looks like this:

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import {tokenNotExpired} from 'angular2-jwt';

@Injectable()
export class AuthService {

authToken: any;

    getProfile() {
        let headers = new Headers();
        this.loadToken();
        headers.append('Authorization', this.authToken);
        headers.append('Content-Type', 'application/json');
        return this.http.get(LOCAL_URI + 'admin/profile', headers)
          .map(res => res.json());
      }

  }

Desired result

The desired result, would be for the token to make it to the server, as I can replicate on Postman, which sends a header with "Authorization": "JWT token..." and returns a proper response with a JSON object including the user profile data.

This used to work perfectly using Angular 2.4 libraries but upon upgrading to Angular 4.2.4, it no longer works and yields the following response from the server:

Response with status: 401 Unauthorized for URL: http://localhost:3000/admin/profile

Observations

If I make Angular use JSON.stringify() on the header in the web console, it looks like this:

{
  "Authorization":["JWT long_hash_number..."],
  "Content-Type":["application/json"]
}

If I take req in the server side (using a NodeJS app employing Passport JWT), the request object contains this _passport field:

{ "instance": { "_key":"passport", "_strategies":{ "session":{ "name":"session" }, "jwt":{ "name":"jwt", "_secretOrKey":"Ihopethisstayssecret", "_verifOpts":{} } }, "_serializers":[], "_deserializers":[], "_infoTransformers":[], "_framework":{}, "_userProperty":"user", "strategies":{} } }

**package.json*

{
  ....,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "angular2-flash-messages": "^2.0.4",
    "angular2-jwt": "^0.2.3",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

R. Richards · Accepted Answer · 2017-12-04 01:33:39Z

4

You cannot just pass headers as a parameter like you are. You need to wrap it in an object. Like below:

getProfile() {
    let headers = new Headers();
    this.loadToken();
    headers.append('Authorization', this.authToken);
    headers.append('Content-Type', 'application/json');
    return this.http.get(LOCAL_URI + 'admin/profile', { headers: headers })
      .map(res => res.json());
}

That parameter is of type RequestOptions, which can include more than just headers.

If you ever get around to moving to Angular 4.3 or higher, consider using the new HttpClient rather that Http. Http is deprecated, and will go away in a future release.

answered Dec 4, 2017 at 1:33

R. Richards

25.2k10 gold badges67 silver badges65 bronze badges

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

1 Comment

The Person Here Over a year ago

Thank you. I overlooked that detail. That does exactly as you say. Will keep in mind that this is being deprecated.

Collectives™ on Stack Overflow

Angular 4 HTTP GET not including JWT for Authorization in HTTP Header

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related