Angular 2 登录 Django Rest Framework 后端

Question

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

我已经设置了一个基本的Angular 2应用程序，从我的Django Rest Framework后端拉取数据。 Django Rest Framework后端配置了“api-auth” URL以登录可浏览的API（请参见 这里），但是我现在尝试从我的Angular 2应用程序登录时遇到问题。

据我所知，最佳实践是使用JSON Web Tokens（JWT）。

我已经查看了几乎所有在线可用的教程/博客文章，但似乎找不到一个清晰的答案总结我需要在后端（Django）和前端（Angular 2）上做什么。有人能够高层次地解释如何从Angular 2前端登录到Django Rest Framework后端吗？

我具体考虑在Angular 2应用程序的“.service.ts”文件中放置一个“登录”函数，该函数将向某个URL“... / login”发出POST请求。请参见这篇博客的login（）函数，以了解我的意思。我按照那个示例进行，但它没有为我提供如何在前端和后端之间创建连接的全部信息。

- dd_123

Answer 1

这个解决方案是使用JWT进行认证的，然而也有其他不使用JWT的解决方案。

此软件包(django-rest-framework-jwt)允许您在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的设置中更改它。

- egeogretmen