Angular 2登录Django Rest框架后端

This package(django-rest-framework-jwt)允许您使用auth端点来管理Django Rest Framework中的JWT.如果您遵循docs,您将没有任何问题.

在Angular2端,您应该有一个登录服务,它将使用登录凭据从服务器请求JWT.这取决于您在Django中的用户模型.

This blog post对Angular2 JWT身份验证非常有帮助.您可以在authentication.service中检查登录功能.我改变了一些代码以更好地适应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

这要求来自drf的jwt并将其存储在localStorage中.

从那时起,所有需要身份验证的http请求都应包含Authorization标头.有一个http wrapper允许你这样做.

您可以override the default configuration settings.您需要覆盖的最小配置是您应该设置globalHeaders.您无需更改tokenName或tokenGetter.只需添加Content-Type：application / json和Accept：application / json. (DRF将检查Accept标头以确定它应该使用哪种类型的Renderer.)您可能还想将headerPrefix更改为JWT,因为drf-jwt使用该前缀作为授权标头,或者您可以从drf-jwt的设置更改它.