如何在Ionic 4的Angular项目中调用C#编写的登录API

1. 根模块引入HTTP客户端依赖 #

首先在app.module.ts中导入HttpClientModule，全局注册HTTP请求能力：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 创建认证服务封装登录请求 #

建议把接口调用逻辑封装到独立服务里，方便复用。先执行命令生成服务：
ionic generate service services/auth
然后在生成的auth.service.ts中写登录请求逻辑：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // 替换成你后端接口的实际访问地址
  private baseUrl = 'http://你的后端服务地址/api/LoginforApp/';
  // 替换成和后端约定匹配的defaulttoken值
  private defaultToken = '后端配置的defaulttoken对应值';

  constructor(private http: HttpClient) { }

  login(email: string, password: string): Observable<any> {
    // 请求体参数和后端LoginModel字段完全对应
    const loginParams = {
      Token: this.defaultToken,
      Email: email,
      Password: password
    }
    // 加responseType: 'text'是因为后端返回的是纯字符串格式的json或者错误提示，避免Angular默认解析json报错
    return this.http.post(this.baseUrl, loginParams, {responseType: 'text'});
  }
}

3. 登录页组件调用登录服务 #

在你登录页的login.page.ts中注入服务，编写点击登录后的处理逻辑：

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { AlertController } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {
  email: string = '';
  password: string = '';

  constructor(
    private authService: AuthService,
    private alertCtrl: AlertController,
    private router: Router
  ) { }

  handleLogin() {
    // 前端基础校验
    if(!this.email.trim() || !this.password.trim()) {
      this.showAlert('提示', '邮箱和密码不能为空');
      return;
    }

    this.authService.login(this.email, this.password).subscribe({
      next: (res) => {
        // 匹配后端返回的错误提示
        if(res === 'Invalid Username and Password.') {
          this.showAlert('登录失败', '邮箱或密码错误');
          return;
        }
        // 登录成功后把返回的JSON字符串转成对象
        const userInfo = JSON.parse(res);
        // 可将用户信息存入本地存储维持登录状态
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        // 跳转到应用首页
        this.router.navigate(['/home']);
      },
      error: (err) => {
        console.error('接口请求失败', err);
        this.showAlert('错误', '网络异常，请稍后重试');
      }
    })
  }

  async showAlert(title: string, message: string) {
    const alert = await this.alertCtrl.create({
      header: title,
      message: message,
      buttons: ['确定']
    });
    await alert.present();
  }
}

4. 登录页模板绑定点击事件 #

在login.page.html中给输入框做双向绑定，给登录按钮绑定点击事件：

<ion-content class="ion-padding">
  <ion-list>
    <ion-item>
      <ion-label position="floating">邮箱</ion-label>
      <ion-input type="email" [(ngModel)]="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">密码</ion-label>
      <ion-input type="password" [(ngModel)]="password"></ion-input>
    </ion-item>
  </ion-list>
  <ion-button expand="block" class="ion-margin-top" (click)="handleLogin()">登录</ion-button>
</ion-content>

注意事项 #

• 本地开发时如果前后端端口不一致，需要后端配置CORS跨域规则，允许前端域名访问，否则会报跨域错误
• 生产环境请将接口地址改为HTTPS协议，避免密码明文传输泄露
• 如果后端后续迭代改为直接返回JSON格式而非字符串，可以去掉post请求里的responseType: 'text'配置，Angular会自动解析返回的JSON对象

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