Angular 2登录Django Rest框架后端

Question

我在后端使用Angular 2作为我的前端和Django Rest Framework来构建webapp.

我已经设置了一个基本的Angular 2应用程序,它从我的Django Rest Framework后端提取数据.Django Rest框架后端配置了'api-auth'url,用于登录可浏览的API(请参阅此处的内容),但我现在遇到了从我的Angular 2应用程序登录时遇到的麻烦.

据我所知,最佳实践是使用JSON Web令牌(JWT).

我已经在线查看了几乎所有现成的教程/博客文章,但似乎无法找到一个明确的答案,总结了我需要在后端(Django)和frontent(Angular 2)上做什么.任何人都能够从高级别解释如何从Angular 2前端登录Django Rest Framework后端？

我正在考虑一个"登录"功能,它将位于Angular 2应用程序中的".service.ts"文件中,该文件会向某个URL".../login"发出请求.请参阅此博客中的login()函数,以了解我的意思.我离开了这个例子,但它没有给我全面了解如何在前端和后端之间建立连接.

Answer 1

此解决方案用于使用JWT进行身份验证,但也有其他解决方案不使用JWT.

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

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

这篇博文对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包装器,允许您这样做.

您可以覆盖默认配置设置.您需要覆盖的最小配置是您应该设置globalHeaders.您无需更改tokenName或tokenGetter.只需添加Content-Type: application/json和Accept: application/json.(DRF将检查Accept标题以决定它应该使用哪种渲染器.)您可能还想将headerPrefix更改为,JWT因为drf-jwt使用该前缀作为授权标头,或者您可以从drf-jwt的设置更改它.