ionic 3 rest api 身份验证答案

【问题标题】：ionic 3 rest api authenticationionic 3 rest api 身份验证
【发布时间】：2018-02-01 04:21:23
【问题描述】：

我正在尝试在 ionic 3 上构建登录页面下面是我正在使用的代码在 home.ts 上

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';

import { ServicesProvider } from '../../providers/services/services';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    userData = { username:'', password:'' };
  data : any;

  constructor(public navCtrl: NavController, public servicesProvider: ServicesProvider) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
    }


  logIn() {
    this.servicesProvider.login(this.userData).then((result)=>{
      this.data = result;
    });
  }

}

在 services.ts 上

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { HttpModule } from '@angular/http';
import { Headers} from '@angular/http';
import {OnInit} from '@angular/core';
import {RequestOptions, Request, RequestMethod} from '@angular/http';


import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';


let apiUrl = 'http://9.xxx.xxx.xxx/test/xxxxx.aspx';


@Injectable()
export class ServicesProvider {

  constructor(public http: Http) {
    console.log('Hello ServicesProvider Provider');
  }

  login(credentials) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Accept', 'application/json');

        this.http.post(apiUrl, JSON.stringify(credentials), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }

}

我得到的回应： {"message":"failure","status":"Blank_Username","response":"Provide Username"}

在浏览器上检查日志时

我在 google POST MAN 上得到的回复：{"message":"success","status":"Auth_Successful","response":"Authentication successful"}

我在 POST MAN 的请求正文中传递了用户名和密码，它响应良好。

我需要了解的是，我是否使用 Angular 4 以错误的方式发送用户名和密码参数？使用ionic 3（角度4）将用户名和密码作为参数发送的其他选项可能是什么。

【问题讨论】：

最好的方法是为什么不创建登录模型并发送到服务？
如果我错了，请纠正我（我是 Angular 和移动应用程序开发的新手）主页是我的登录模型，我正在将请求发送到 services.ts 页面上的服务是吗与您的建议不同？提前致谢
你能在处理post请求的地方显示你的后端代码吗

标签： angular ionic3 restful-authentication typescript-typings

【解决方案1】：

你可以尝试像这样定义标题

this.http.post(apiUrl, JSON.stringify(credentials), {
   headers: new HttpHeaders().set('Content-Type', 'application/json')
})

可能请求的内容类型不正确

您可以尝试的另一件事是查看您正在执行的邮递员呼叫，它可能以 url 编码发送数据，您的呼叫应该更改为这样的内容

 let url = `grant_type=password&username=${credentials.username}&password=${credentials.password}`;
 return this
        ._http
        .post(apiUrl, url, {
             headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
        })

【讨论】：

【解决方案2】：

使用 HttpHeaders

let headers = new HttpHeaders({
   'Accept': 'application/json',
   'Content-Type': 'application/json; charset=utf-8',
});

【讨论】：

【解决方案3】：

我认为问题出在您的userData.username 默认设置为空字符串

userData = { username:'', password:'' };

更新{userData} 字段的值（可能通过表单），您应该会得到正确的响应。

【讨论】：