Enable this example service to work with django-rest-framework-jwt

app/_services/authentication.service.ts

@@ -1,21 +1,33 @@
 import { Injectable } from '@angular/core';
-import { Http, Headers, Response } from '@angular/http';
-import { Observable } from 'rxjs';
+import {Http, Headers, Response, RequestOptions} from '@angular/http';
+import {Observable} from "rxjs";
 import 'rxjs/add/operator/map'
+import 'rxjs/add/observable/throw';
+import 'rxjs/add/operator/catch';
 
 @Injectable()
 export class AuthenticationService {
+
+    //private url = 'http://localhost:8000/api-token-auth/';  // FOR REMOTE TESTING (also remove fake backend in app.module.ts)
+    private url = '/api/authenticate';                        // FOR LOCAL TESTING
+
+    private options: RequestOptions;
+
     public token: string;
 
     constructor(private http: Http) {
         // set token if saved in local storage
         var currentUser = JSON.parse(localStorage.getItem('currentUser'));
         this.token = currentUser && currentUser.token;
+
+        let headers = new Headers({ 'Content-Type': 'application/json' });
+        this.options = new RequestOptions({ headers: headers });
     }
 
     login(username: string, password: string): Observable<boolean> {
-        return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
+        return this.http.post(this.url, JSON.stringify({ username: username, password: password }), this.options)
             .map((response: Response) => {
+
                 // login successful if there's a jwt token in the response
                 let token = response.json() && response.json().token;
                 if (token) {
@@ -31,12 +43,26 @@ export class AuthenticationService {
                     // return false to indicate failed login
                     return false;
                 }
-            });
+            })
+            .catch(this.handleError);
     }
 
     logout(): void {
         // clear token remove user from local storage to log user out
         this.token = null;
         localStorage.removeItem('currentUser');
     }
+
+    private handleError (error: Response | any) {
+        let errMsg: string;
+        if (error instanceof Response) {
+            const body = error.json() || '';
+            const err = body.error || JSON.stringify(body);
+            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+        } else {
+            errMsg = error.message ? error.message : error.toString();
+        }
+        console.error(errMsg);
+        return Observable.throw(errMsg);
+    }
 }

app/login/login.component.ts

@@ -25,13 +25,23 @@ export class LoginComponent implements OnInit {
     login() {
         this.loading = true;
         this.authenticationService.login(this.model.username, this.model.password)
-            .subscribe(result => {
-                if (result === true) {
-                    this.router.navigate(['/']);
-                } else {
-                    this.error = 'Username or password is incorrect';
-                    this.loading = false;
-                }
-            });
+            .subscribe(
+                result => this.handleResponse(result),
+                error => this.handleError(error)
+            );
+    }
+
+    handleResponse(result: boolean) {
+        if (result === true) {
+            this.router.navigate(['/']);
+        } else {
+            this.error = 'Username or password is incorrect';
+            this.loading = false;
+        }
+    }
+
+    handleError(error: string) {
+        this.error = 'Error caught during authentication: ' + error;
+        this.loading = false;
     }
 }

systemjs.config.js

@@ -34,6 +34,7 @@
                 defaultExtension: 'js'
             },
             rxjs: {
+                main: 'bundles/Rx.js',
                 defaultExtension: 'js'
             }
         }