title: Handling 401s globally with Angular
body: <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>