Angular 2 登录到 Django Rest Framework 后端

Question

我在前端使用 Angular 2，在后端使用 Django Rest Framework 来构建 Web 应用程序。

我已经设置了一个基本的 Angular 2 应用程序，它从我的 Django Rest Framework 后端提取数据。 Django Rest Framework 后端配置了“api-auth”url 以使用可浏览的 API 登录(请参阅 here 了解我的意思)，但我现在在尝试登录时遇到麻烦我的 Angular 2 应用。

据我所知，最佳做法是使用 JSON Web Tokens (JWT)。

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

我特别考虑了一个“登录”功能，它位于 Angular 2 应用程序的“.service.ts”文件中，可以向某个 url“.../login”发出发布请求。请参阅 this blog 中的 login() 函数了解我的意思。我正在离开那个例子，但它并没有让我全面了解如何在前端和后端之间创建连接。

Answer 1

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

This package (django-rest-framework-jwt) 允许您在 Django Rest Framework 中使用 auth 端点来管理 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 请求都应包含授权 header 。有一个 http wrapper这让你可以做到这一点。

您可以 override the default configuration settings .您需要覆盖的最低配置是您应该设置的是 globalHeaders。您不需要更改 tokenName 或 tokenGetter。只需添加 Content-Type: application/json 和 Accept: application/json。 (DRF 将检查 Accept header 来决定它应该使用哪种 Renderer。)您可能还想将 headerPrefix 更改为 JWT 因为 drf-jwt 使用它授权 header 的前缀，或者您可以从 drf-jwt 的设置中更改它。