Angular 2 Login to Django Rest Framework Backend

This solution is for authentication using JWT, however there are also other solutions that don't use JWT.

This package(django-rest-framework-jwt) allows you to have auth endpoints to manage JWT in Django Rest Framework. You will have no problems if you follow the docs.

On the Angular2 end, you should have a login service that would request the JWT from the server by using the login credentials. That depends on your User Model in Django.

This blog post is very helpful with Angular2 JWT Authentication. You can check the login function in the authentication.service. I changed the code a bit to better suit the DRF-jwt.

let headers = new Headers({
  'Accept': 'application/json',
  'Content-Type': 'application/json',
});
let options = new RequestOptions({
  headers: headers
});
this.http.post(basePath + '/api-token-auth/', JSON.stringify({ username: username, password: password }), options)
.map((response: Response) => {
      // login successful if there's a jwt token in the response
      let token = response.json() && response.json().token;

      if (token) {
        // set token property
        this.token = token;

        // store username and jwt token in local storage to keep user logged in between page refreshes
        localStorage.setItem('id_token', token);

        // return true to indicate successful login
        return true;
      } else {
        // return false to indicate failed login
        return false;
      }
    });
// 'api-token-auth/' is the default endpoint with drf-jwt

This asks for the jwt from drf and stores it in localStorage.

From there on, all of your http requests that require authentication should include the Authorization header. There is an http wrapper that allows you to do this.

You can override the default configuration settings. The minimum configuration you need to override is that you should set is the globalHeaders. You don't need to change the tokenName or tokenGetter. Just add Content-Type: application/json and Accept: application/json. (DRF will check the Accept header to decide what kind of Renderer it should use.) You may also want to change the headerPrefix to JWT because drf-jwt uses that prefix for authorization header or you can change that from drf-jwt's settings.