Angular 2登录到Django Rest Framework后端

Posted 2023-03-04

【中文标题】Angular 2登录到Django Rest Framework后端

【英文标题】：Angular 2 Login to Django Rest Framework Backend

【发布时间】：2017-04-29 07:22:11

【问题描述】：

我使用 Angular 2 作为前端，使用 Django Rest Framework 作为后端来构建 web 应用程序。

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

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

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

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

【参考方案1】：

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

This package(django-rest-framework-jwt) 允许您拥有身份验证端点来管理 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 的设置。