Angular 2 - Handling multiple subscriptions on a single observable

Question

I'm working on an Angular 2 app and need some guidance on how to handle authentication errors cleanly.

My end goal is to be able to centrally handle authentication errors (specifically 401 and 403) for every Http request.

I found this question super helpful for getting me started, however I'm stuck as to the proper way to register my error handler for each observable returned by my custom Http implementation.

Here is a sample of what I'm currently working with:

import { Injectable } from 'angular2/core';
import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response } from 'angular2/http';

import { Observable } from 'rxjs/Observable';


@Injectable()
export class ClauthHttp extends Http {

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

    get(url: string, options ? : RequestOptionsArgs): Observable < Response > {
        var response = super.get(url, options);

        return this._handleSecurityResponse(response);
    }

    /*
    Other overrides omitted for brevity...
    */

    private _handleSecurityResponse(response: Observable < Response > ): Observable < Response > {
        response.subscribe(null, (error: Response) => {
            // Do some nifty error handling here.
        });

        return response;
    }
}

The above solution "works" with one hitch... Every HTTP request is made twice. That's no good.

Any guidance on how to properly do this?

(Update) Working Code

Based on the information in the accepted answer here is what the class looks like in its properly functioning form.

import {Injectable} from 'angular2/core';
import {Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response} from 'angular2/http';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';


@Injectable()
export class ClauthHttp extends Http {

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

    get(url: string, options ? : RequestOptionsArgs): Observable < Response > {
        var response = super.get(url, options);

        return this._handleSecurityResponse(response);
    }

    /*
    Other overrides omitted for brevity...
    */

    private _handleSecurityResponse(response: Observable < Response > ): Observable < Response > {
        var sharable = response.share();

        sharable.subscribe(null, (error: Response) => {
            // Do some nifty error handling here.
        });

        return sharable;
    }
}

Answer 1

This is probably due to the fact that your Observable<Response> is a cold observable, i.e. it is 'restarted' for every new subscriber. For an explanation of hot vs. cold observables, have a look at Hot and Cold observables : are there 'hot' and 'cold' operators?. So here you probably subscribe once for the result handler, and another time for the error handler.

You should be able to workaround the subscriptions side effect by 'sharing' your observable,

i.e. replace

var response = super.get(url, options);

With

var response = super.get(url, options).share();`