Question

我对AngularJ知之甚少，我想创建一个非常简单的SPA，以django为后端，以AngularJs为前端。当用户登录时，用户将能够在同一页面上进行注册，登录和注销所有操作，他们将看到一条消息“欢迎（用户电子邮件）”。

在普通的django网络应用程序中，这很容易做到，因为我们甚至不需要创建整个身份验证系统。但是我想学习如何用AngularJS做到这一点，因为我的雇主希望我这样做。

我已经阅读了AngularJs的基础知识，并且看起来很好解释（很有意义），但是如何将其与Django集成在一起。我尝试在Internet上搜索，但是那里什么也没有，那里的教程已有7年的历史了。

Answer 1

首先，您需要查看angular HttpClient，因为这将启用django和angular之间的通信。然后创建一个服务来处理身份验证，您可以将其命名为任何导入HttpClient的内部登录用户，例如，我将执行以下操作：< / p>

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Router } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class AuthServiceService {  

  constructor(private http: HttpClient, private router: Router) { }
  // Skip authorization from these requests
  private skip_token_headers = {
    skip: "true"
  };
  loginUser(user): Observable<any> {
    return this.makePostRequest(environment.LOGIN_URL, user, 
    this.skip_token_headers);
  }
  makePostRequest(url: string, data: any, req_headers: any): Observable<any> {
    return this.http.post(url, data, { headers: req_headers });
  }

然后在.ts下的登录组件中，导入服务并像下面一样使用它

onLoginSuccess(result){
    localStorage.setItem('token', result.key);
    localStorage.setItem('user', JSON.stringify(result.user));       
    
    this.router.navigate(['/userpage']);
  }

  onSubmit(form: NgForm) {
    this.authService.loginUser(this.user).subscribe(
      result => {
        this.onLoginSuccess(result);
      },
      error => {
        this.login_errors = [];
        if (error['error']['non_field_errors']) {
          this.login_errors = error['error']['non_field_errors'];
        }
        // this.clearErrors(this.user);
        // this.showErrors(error);
      }
    );
  }

如何将AngularJs与Django集成

1 个答案: