如何在Angular4中调用Django编写的登录Rest API？附组件代码

我来帮你把这个登录功能补全并理顺，你已经有了Django的REST登录接口，接下来我们把Angular4这边的调用逻辑完善好：

完整的 login.component.ts 代码实现 #

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  // 绑定表单的用户名和密码字段
  username: string = '';
  password: string = '';
  errorMessage: string = '';

  constructor(private router: Router, private http: Http) { }

  ngOnInit() {
    // 组件初始化时可以做一些清理工作，比如清空本地存储的旧token
    localStorage.removeItem('authToken');
  }

  // 登录方法
  onLogin() {
    // 1. 构造请求头，指定内容类型为JSON
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    // 2. 构造登录请求体
    const loginData = {
      username: this.username,
      password: this.password
    };

    // 3. 调用Django的登录API（替换成你的实际接口地址）
    this.http.post('http://你的Django域名/api/login/', JSON.stringify(loginData), options)
      .map((response: Response) => response.json())
      .subscribe(
        (data) => {
          // 登录成功：保存token到本地存储，跳转到主页
          localStorage.setItem('authToken', data.token);
          this.router.navigate(['/dashboard']);
        },
        (error) => {
          // 登录失败：处理错误信息
          this.errorMessage = error.json().detail || '登录失败，请检查用户名或密码';
        }
      );
  }
}

关键部分说明 #

• 表单数据绑定：添加了username和password属性，用来和模板中的表单输入框做双向绑定，方便获取用户输入
• 请求头配置：设置Content-Type: application/json，确保Django后端能正确解析请求体内容
• API调用逻辑：使用http.post发送登录请求，通过map解析JSON格式的响应，再用subscribe分别处理登录成功和失败的回调
• 状态存储：登录成功后把Django返回的认证token存在localStorage里，后续其他接口请求可以带上这个token做身份验证

对应的 login.component.html 模板示例 #

<div class="login-container">
  <h2>系统登录</h2>
  <!-- 显示登录错误信息 -->
  <div *ngIf="errorMessage" class="error-tip">{{ errorMessage }}</div>
  <!-- 登录表单 -->
  <form (ngSubmit)="onLogin()">
    <div class="form-item">
      <label>用户名:</label>
      <input type="text" [(ngModel)]="username" name="username" required>
    </div>
    <div class="form-item">
      <label>密码:</label>
      <input type="password" [(ngModel)]="password" name="password" required>
    </div>
    <button type="submit" class="login-btn">登录</button>
  </form>
</div>

必要的配置说明 #

1. Angular模块依赖：确保你已经在根模块（比如app.module.ts）中导入了HttpModule，否则Http服务无法使用：

import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    // ...其他已导入的模块
    HttpModule
  ]
})
export class AppModule { }

2. Django跨域配置：因为Angular前端和Django后端通常是跨域运行的，你需要在Django中配置跨域支持：
   • 先安装依赖：pip install django-cors-headers
   • 在settings.py中添加如下配置：

     INSTALLED_APPS = [
         # ...其他已注册的应用
         'corsheaders',
     ]
     
     MIDDLEWARE = [
         'corsheaders.middleware.CorsMiddleware',
         'django.middleware.common.CommonMiddleware',
         # ...其他中间件
     ]
     
     # 开发环境可以临时开启全量跨域，生产环境建议指定允许的前端域名
     CORS_ALLOW_ALL_ORIGINS = True
     

这样你的Angular4应用就能正常调用Django的登录API完成登录功能啦！

内容的提问来源于stack exchange，提问作者Zuber