Handling 401s globally with Angular
<p>In my Angular 2 project I make API calls from services that return an Observable. The calling code then subscribes to this observable. For example:</p>

<pre><code>getCampaigns(): Observable&lt;Campaign[]&gt; {
    return this.http.get('/campaigns').map(res =&gt; res.json());
}
</code></pre>

<p>Let's say the server returns a 401. How can I catch this error globally and redirect to a login page/component?</p>

<p>Thanks.</p>

<hr>

<p>Here's what I have so far:</p>

<p>// boot.ts</p>

<pre><code>import {Http, XHRBackend, RequestOptions} from 'angular2/http';
import {CustomHttp} from './customhttp';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS,
    new Provider(Http, {
        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) =&gt; new CustomHttp(backend, defaultOptions),
        deps: [XHRBackend, RequestOptions]
    })
]);
</code></pre>

<p>// customhttp.ts</p>

<pre><code>import {Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class CustomHttp extends Http {
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable&lt;Response&gt; {

        console.log('request...');

        return super.request(url, options);        
    }

    get(url: string, options?: RequestOptionsArgs): Observable&lt;Response&gt; {

        console.log('get...');

        return super.get(url, options);
    }
}
</code></pre>

<p>The error message I'm getting is "backend.createConnection is not a function"</p>