Ionic 2 - 如何提出登录请求？

Question

我需要在我的Ionic 2应用程序中实现登录。现在，我只需确保电子邮件和密码得到正确接收并获得基本回复。

我已经成功地测试了一个GET请求到API，它正常工作，但我无法获得POST请求的工作。

我已经尝试了两种方法：

1. 使用subscribe：

   登录组件：

   submitLogin() 
   { 
       var email = this.loginForm.value.email.trim(); 
       var password = this.loginForm.value.password.trim(); 
   
       this.userService.makeLogin(email, password);  
   } 
   

   服务：

   makeLogin(email: string, password: string) 
   { 
       var body = JSON.stringify({ 
        email: email, 
        password: password 
       }); 
   
       var headers = new Headers(); 
       headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
   
       this.http 
        .post(this.loginUrl, body, { headers: headers }) 
        .subscribe(data => { 
           console.log('login API success'); 
           console.log(data); 
          }, error => { 
           console.log(JSON.stringify(error.json())); 
        }); 
   } 
   

   的API（笨）：（代码最低为测试目的）

   public function testLoginIonic2() 
   { 
       header('Access-Control-Allow-Origin: *'); 
       header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); 
   
       $account_email = $this->input->post('email'); 
       $account_password = $this->input->post('password'); 
   
       echo json_encode($account_email); 
   } 
   

   结果：

   

   到服务器的连接，似乎好 - 但没有数据被返回 - 响应的主体为空

2. 使用Promise：

   登录组件：

   submitLogin() 
   { 
       var email = this.loginForm.value.email.trim(); 
       var password = this.loginForm.value.password.trim(); 
   
       this.userService.testLogin(email, password) 
         .then(data => { 
          console.log('response data'); 
          console.log(data); 
         }); 
   } 
   

   服务：

   testLogin(email: string, password: string): Promise<any> 
   { 
       var body = JSON.stringify({ 
        email: email, 
        password: password 
       }); 
   
       var headers = new Headers(); 
       headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
   
       return this.http 
        .post(this.loginUrl, body, {headers: headers}) 
        .toPromise() 
        .then(res => res.json().data); 
   } 
   

   API：同

   前结果：

   

   我收到此错误信息：Unexpected end of JSON input（可能是因为响应是空的，因此不能以JSON格式）。

为什么我会得到一个空的回应？

表单正常工作。错误不在那里。

所以请求中肯定有错，但是什么？

编辑：

测试与波兹曼看来，参数是空的。可能它们没有正确发送。

Answer 1

感谢您的回复。

@ hgoebl的回答正常。

我发现了一个解决方案，是一个比较简单的使用URLSearchParams：

组件：

submitLogin() 
{ 
    var email = this.loginForm.value.email.trim(); 
    var password = this.loginForm.value.password.trim(); 

    this.userService.makeLogin(email, password) 
     .subscribe((response) => { 
      console.log(response); 
     }, (error) => { 
      console.log(error); 
     }); 
} 

服务：

makeLogin(email: string, password: string) 
{  
    let urlSearchParams = new URLSearchParams(); 
    urlSearchParams.append('email', email); 
    urlSearchParams.append('password', password); 
    let body = urlSearchParams.toString() 

    var headers = new Headers(); 
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 

    return this.http 
     .post(this.loginUrl, body, { headers: headers }) 
     .map(response => response.json()) 
} 

记住URLSearchParams有请在服务中输入：

import { Http, Headers, URLSearchParams } from '@angular/http'; 

EDIT：

我移动部件内的订阅能够处理组件内的响应数据。

Answer 2

您不应该在http.post之后做map吗？

this.http 
    .post(this.loginUrl, body, { headers: headers }) 
    .map(response => response.json()) 
    .subscribe(data => { 
     console.log('login API success'); 
     console.log(data); 
    }, e => { 
     console.log(e); 
    }); 

您对observables的回复看起来不错，但没有解析。

Answer 3

对我来说，如果问题是以错误的格式发送的，那么看起来好像是这样。 你告诉服务器它的内容是application/x-www-form-urlencoded，但是你发送的是JSON。

你可以试试这个：

testLogin(email: string, password: string): Promise<any> 
{ 
    var headers = new Headers(); 
    headers.append('Content-Type', 
     'application/x-www-form-urlencoded; charset=UTF-8'); 

    let params = {email, password}; 
    let body = this.toFormUrlEncoded(params); 

    //... your post request 
} 

private toFormUrlEncoded(object: Object): string { 
    return Object.keys(object) 
     .map(key => { 
      return encodeURIComponent(key) + '=' + 
        encodeURIComponent(object[key]); 
     }) 
    .join('&'); 
} 

作为替代你也可以改变你的内容类型，以JSON和更改服务器解码JSON。