Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

255
Views
Angular 2 - Handling multiple subscriptions on a single observable

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;
    }
}
over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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();`
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!