api - 如何与 Ionic 中提供的 API 进行匹配和验证？

Question

我已经相应地创建了登录功能，但登录功能不起作用。每当我输入示例输入（电话号码和密码）时，它并没有将我引导到主页。下图中提供了有关 API 的详细信息。有什么我错过的吗？请帮我解决这个问题。

API详细信息：

HTML 代码：

<ion-header>
  <ion-navbar>
    <ion-title>
      Login
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <form name="form"(ngSubmit)="login()" novalidate>
      <ion-item>
        <ion-label fixed>Phone Number</ion-label>
        <ion-input type="number" name="phoneNumber" value="" [(ngModel)]="model.phoneNumber" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label fixed>Password</ion-label>
        <ion-input type="password" name="password" value="" [(ngModel)]="model.password" required></ion-input>
      </ion-item>
      <ion-item>
        <button ion-button>Enter</button>
      </ion-item>
    </form>
  </ion-list>
</ion-content>

.TS 代码：

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, ToastController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { apiService } from '../../providers/api-service.service';
import { AuthService } from '../../providers/auth-service.service';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})

export class LoginPage {
  model : any = {};
  response: any[] = [];
  constructor(public navCtrl: NavController, public apiService: apiService, public toastCtrl: ToastController, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public AuthService: AuthService){}

  loginUser(){
    this.AuthService.login();
  }
  logoutUser(){
    this.AuthService.logout();
  }
  nextPage(data){
    this.navCtrl.push(HomePage,data).catch(err => {
      let alert = this.alertCtrl.create({
        title: 'Something',
        subTitle: 'something something',
        buttons: ['OK']
      });
      alert.present();
    });
  }
  errorToast(){
    let toast = this.toastCtrl.create({
      message: 'Cannot login',
      duration: 3000
    });
    toast.present();
  }
  logoutout(){
    let loader = this.loadingCtrl.create({
      content: "Loging out.....",
      duration: 1000
    })
    loader.present();
    this.loginUser();
  }
  login(){
    this.apiService.apiCall(this.model.phoneNumber, this.model.password)
    .then(data => {
      this.logoutout();
      this.nextPage(data);
    })
    .catch(error => {
      this.errorToast();
    })
  }
}

供应商代码：

api-service.service.ts

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map'

@Injectable()
export class apiService{
    constructor(private http: Http){}

    apiCall(phoneNumber, password){
        let headers = new Headers({
            "X-Auth-PhoneNumber": '',
            "X-Auth-Password": '',
            "SW-Version": '',
            "Device-Id": '',
            "Device-Model": ''
        })
        let options = new RequestOptions({
            headers: headers
        });

        return this.http.get('https://api.keyway.com.my/client/mobile/verification'+ phoneNumber + password, options)
        .map(res => res.json())
        .toPromise();
    }
}

身份验证服务.service.ts

import {Injectable} from '@angular/core';
@Injectable()
export class AuthService{
    private isLoggedIn = false;
    constructor(){}

    login(): void{
        this.isLoggedIn = true;
    }
    logout(): void{
        this.isLoggedIn = false;
    }
    authenticated():boolean{
        return this.isLoggedIn;
    }
}

Answer 1

因为您正在发送username并password使用请求 URL，但根据请求定义，您需要发送标头，因此请进行如下更改 -

apiCall(phoneNumber, password){
        let headers = new Headers({
            "X-Auth-PhoneNumber": phoneNumber',
            "X-Auth-Password": password,
            "SW-Version": '',
            "Device-Id": '',
            "Device-Model": ''
        })
        let options = new RequestOptions({
            headers: headers
        });

        return this.http.get('https://api.keyway.com.my/client/mobile/verification', options)
        .map(res => res.json())
        .toPromise();
    }

也尝试console在请求后输出。

login(){
    this.apiService.apiCall(this.model.phoneNumber, this.model.password)
    .then(data => {
      console.log(data);    // Console Output
      this.logoutout();
      this.nextPage(data);
    })
    .catch(error => {
      console.log(error);    // Console Error output
      this.errorToast();
    })
  }