title: Authorization Token getting sent as null in the Response in Angular
body: <p>I am trying to work with REST API's provided within my Enterprise Application and Angular. What I am trying to achieve is to fetch some data from my Enterprise Application. For this I have to do two things:</p>
  
  <p>1- Login to my Enterprise Application via Angular. For doing so, there's already a custom authentication REST API provided by the Enterprise Application. I am consuming the same. An authentication token is generated which I am saving within localStorage.</p>
  
  <p>2- Send a GET request to the Enterprise Application to fetch data after Authentication happened. This is where I am facing issues. I am unable to pass the authentication token within the GET Request. On Checking the same under "Application" Tab of Chrome Dev Tools, I Could see under "Request Headers" Section that Authorization value is null. Below is the screenshot of the same:</p>
  
  <p><a href="https://i.stack.imgur.com/NI2p5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NI2p5.png" alt="enter image description here"></a></p>
  
  <p>Below is my code that I have developed:</p>
  
  <p>1 - Authentication Service (auth.service.ts)</p>
  
  <pre><code>     import { Injectable } from '@angular/core';
       import { HttpClient, HttpHeaders } from '@angular/common/http';
       import{Http} from '@angular/http'
       import { Observable } from 'rxjs';
       import { map } from 'rxjs/operators';
       import { URLSearchParams,Response } from '@angular/http'
  
       @Injectable()
       export class AuthenticationService {
       constructor(private http: Http) { }
       username:string = 'Admin';
       password:string='livelink';  
       token:any; 
       login() 
       {
  
      let urlSearchParams = new URLSearchParams();
      urlSearchParams.append('Username', this.username);
      urlSearchParams.append('Password', this.password);
       this.http.post('http://localhost/otcs/cs.exe/api/v1/auth',urlSearchParams)
          .subscribe((res:Response) =&gt; 
          {
              // login successful if there's a jwt token in the response
              if (res) {
                  const data = res.json();
                  ;
                  this.token = data;
                  console.log(data);
                  // store username and jwt token in local storage to keep user logged in between page refreshes
                  localStorage.setItem('currentUser', JSON.stringify({  ticket: data }));
  
              }
          });
  
          console.log("INSIDE LOGIN this.token  = "+this.token)//done for debugging, returning undefined
  }
  
  public getToken()
   {
  
      console.log("GET TOKEN VALUE "+ localStorage.getItem('ticket'))//done for debugging, returning undefined
      return localStorage.getItem('ticket');
       }
  
    }
  </code></pre>
  
  <p>2 - Token Interceptor (token.interceptor.ts)</p>
  
  <pre><code>     import { Injectable } from '@angular/core';
       import {
       HttpRequest,
       HttpHandler,
       HttpEvent,
       HttpInterceptor
       } from '@angular/common/http';
       import { AuthenticationService } from './auth.service';
       import { Observable } from 'rxjs';
       import { Http } from '@angular/http';
  
       @Injectable()
       export class TokenInterceptor implements HttpInterceptor {
       constructor(public auth: AuthenticationService) {}
       intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): 
       Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
       request = request.clone({
       setHeaders: {
       Authorization: `Bearer ${this.auth.getToken()}`
       }
     });
  
          return next.handle(request);
       }
     }
  </code></pre>
  
  <p>3 - App Component (app.component.ts)</p>
  
  <pre><code> import { Component } from '@angular/core';
   import { AuthenticationService } from './auth.service';
   import{Http} from '@angular/http'
   import { HttpClient } from '@angular/common/http'
   @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
   })
    export class AppComponent 
    {
  
   constructor(private authenticationService: AuthenticationService, private 
   http:HttpClient)
     {
        this.authenticationService.login();
        this.ping() ;
  
      }
  
       public ping() {
      this.http.get('http://localhost/otcs/cs.exe/api/v1/nodes/16236/output')
       .subscribe(
    data =&gt; console.log(data),
    err =&gt; console.log(err)
          );
        }
      }
  </code></pre>
  
  <p>4- App Module (app.module.ts)</p>
  
  <pre><code>     import { BrowserModule } from '@angular/platform-browser';
       import { NgModule } from '@angular/core';
       import { HttpClientModule, HTTP_INTERCEPTORS } from 
       '@angular/common/http';
       import { AppComponent } from './app.component';
       import { AuthenticationService } from './auth.service';
       import { HttpModule } from '@angular/http';
       import { TokenInterceptor } from './token.interceptor';
  
       @NgModule({
       declarations:[AppComponent],
       imports: [
              BrowserModule,
              HttpClientModule,
              HttpModule
             ],
  
      providers: [AuthenticationService,
     {
        provide: HTTP_INTERCEPTORS,
        useClass: TokenInterceptor,
         multi: true
  }],
          bootstrap: [AppComponent]
       })
          export class AppModule { }
  </code></pre>
  
  <p>On running the above project, below is the output displayed in Console:</p>
  
  <p><a href="https://i.stack.imgur.com/m3jzu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m3jzu.png" alt="enter image description here"></a></p>
  
  <p>I am unable to understand as to why is my token not getting passed with the GET Request.</p>