Question

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

我已经设置了一个基本的Angular 2应用程序，它从我的Django Rest Framework后端提取数据。 Django Rest框架后端有“api-auth＆＃39; url已配置为使用可浏览的API登录（请参阅here了解我的意思），但我现在遇到麻烦，尝试 从我的Angular 2应用程序登录

据我所知，最佳做法是使用JSON Web令牌（JWT）。

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

我特意想着一个＆＃34;登录＆＃34;功能将位于＆＃34; .service.ts＆＃34;在Angular 2应用程序中的文件，它会向某个网址发送请求＆＃34; ... / login＆＃34;。请参阅this blog中的login（）函数，以了解我的意思。我离开了那个例子，但它并没有让我全面了解如何在前端和前端之间建立连接。后端。

Answer 1

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

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的设置中改变它。

Angular 2登录Django Rest框架后端

1 个答案: