How to set Authorization Header ?

I am using ng2-signalrin ionic 2. Issue is that i don’t know how to set authorization header. I have search but didn’t find any example.

My code for connecting to server hub.

   let options: IConnectionOptions = { qs:{userId:1}, url: "http://192.168.0.211:44337"};
                
		console.log("Stage 1");
			//Header for 'this.singalR.connect'
        this.signalR.connect(options)
            .then((connection) => {                      
        
                console.log("Client Id: " + connection.id);                     
             }, (err) => {
                console.log("SignalR Error: " + JSON.stringify(err));
            });

How to set below header ?

  var headers = new Headers({
            'Content-Type': "application/json",
            "Authorization": 'Bearer ' + accessToken  //accessToken contain bearer value.
        });

Note: Before implementing Authorization same code working fine as i don’t need to set authorization header.

[Usman235]

@HNeukermans Thanks for response.

Issue it that is have two signalr client , one is in simple angularjs and other is ionic 2 .

In Simple Angularjs i’m doing following to set the header. (Which is working).

$.signalR.ajaxDefaults.headers = new Headers({
            'Content-Type': "application/json",
            "Authorization": 'Bearer ' + accessToken  //accessToken contain bearer value.
        });

I’m wondering if there is way to send headers just like above . If i go for query string option that is what you suggested then i have to change a lot of code on server side as well as on simple angularjs signalr client .

Is there any other way ?

[Jrubzjeknf]

We created a custom service where the SignalR and OAuthService are injected. Below is a basic example where the ISignalRConnection is provided through an Observable. This way, if the connection is interrupted and re-establised, you are able to automatically resubscribe to the new connection.

import { Injectable, OnInit } from '@angular/core';
import { SignalR, ISignalRConnection } from 'ng2-signalr';
import { Notice } from "app/feed/notice/notice.model";
import { Observable } from "rxjs/Observable";
import { Subject } from "rxjs/Subject";
import { OAuthService } from "angular-oauth2-oidc/dist";

@Injectable()
export class SignalrService {
  private subject: Subject<ISignalRConnection>;
  public connection: Observable<ISignalRConnection>;

  constructor(private signalR: SignalR, private oauthService: OAuthService) {
    this.subject = new Subject<ISignalRConnection>();
    this.connection = this.subject.asObservable().shareReplay(1);

    if (navigator.onLine) {
      this.connect();
    }
  }

  private connect() {
    // Set auth headers.
    let $ = (<any>window).$;
    $.signalR.ajaxDefaults.headers = {
      'Content-Type': "application/json",
      "Authorization": 'Bearer ' + this.oauthService.getAccessToken()
    };

    let promise = this.signalR.connect();

    promise
      .then(x => {
        this.subject.next(x);

        x.errors.subscribe(y => {
          if (y.message.includes(`Couldn't reconnect within the configured timeout`)) {
            this.reconnect();
          }
        })
      })
      .catch(x => this.reconnect());
  }

  private reconnect() {
    let ms = 3000;
    console.log(`Manual reconnect after ${ms}ms`);
    setTimeout(() => this.connect(), ms)
  }
}

And to listen for a message, inject this SignalrService and subscribe to the connection Observable:

    this.signalrService
        .connection
        .subscribe(connection => connection
            .listenFor('your-message')
            .subscribe((yourMessage: IYourMessage) => {
                // do something
            }));