Ionic 3 API를 사용한 로그인 인증 - 속성 ' json ' of

10

API를 사용하여 Ionic 3 인증을하고 있지만 로그인 프로세스에서 오류가 표시됩니다.'json'속성을 읽을 수 없습니다.

이것은 나의 공급자> restapi> restapi.ts입니다.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';

let apiUrl = 'http://192.168.1.10/honeybee/HoneyApi/';

@Injectable()
export class RestapiProvider {

  constructor(public http: HttpClient) {
    console.log('Hello RestapiProvider Provider');
  }

  getUsers(credentials, type) {
    return new Promise((resolve, reject) => {
      var headers = new Headers();
      headers.append('Access-Control-Allow-Origin' , '*');
      headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
      headers.append('Accept','application/json');
      headers.append('content-type','application/json');

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

이것은 내 loginpage.ts입니다.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { ListPage } from '../list/list';


@IonicPage()
@Component({
  selector: 'page-loginpage',
  templateUrl: 'loginpage.html',
})
export class LoginpagePage {
  responseData : any;
  userData = {"email": "", "password": ""};

  constructor(public navCtrl: NavController, public navParams: NavParams,
    public restProvider: RestapiProvider) {

  }

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

  getloginUsers(){
    this.restProvider.getUsers(this.userData,'user_Login').then((result) => {
     this.responseData = result;
     if(this.responseData.userData){
     console.log(this.responseData);
     console.log("User Details");
     this.navCtrl.push(ListPage);
     }
     else{
       console.log("Incorrect Details"); }
    }, (err) => {
     // Error log
   });

 }

}

이것은 내 loginpage.html입니다.

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


<ion-content padding>
  <form (submit)="getloginUsers()">
    <ion-list>

      <ion-item>
        <ion-label fixed>Email</ion-label>
        <ion-input type="email" [(ngModel)]="userData.email" name="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>Password</ion-label>
        <ion-input type="password" [(ngModel)]="userData.password" name="password"></ion-input>
      </ion-item>
      <div padding>
        <button ion-button color="primary" block>Login</button>
      </div>

    </ion-list>
  </form>
</ion-content>

로그인 버튼을 클릭하면 null의 속성 'json'을 읽을 수 없습니다. Advance에서 도움을 주신 모든 도움. 도와주세요.

Raghav

출처 angular api http authentication ionic3
  • 분명히 당신res개체의 값이 null 인 경우, 그렇지 않습니다. ~해라.console.log(res)그것을 확인하십시오. - Sébastien
  • @ S é 바스 티앙. 네, 맞습니다만 입력 필드에서 값을 가져 오는 방법을 솔루션에 제공 할 수 있습니까? (loginpage.html) - Raghav

4 답변

2

먼저:

모델의너라면 추가 일FormsModule설정 파일에서.

@NgModule({
  declarations: [ MyApp ],
  imports: [
    FormsModule
    ...
  )],
  bootstrap: [...],
  entryComponents: [ ... ],
  providers: []
})

둘째:

JSON 형식으로 데이터를 보내고 Content-Type을 추가하십시오.

getUsers(credentials, type) {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  return this.http
          .post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
          .map(res => res.json());
}

전화해서loginpage(약속 없음)

this.restProvider.getUsers(this.userData,'user_Login')
    .subscribe(res => this.responseData = result);

제삼:

백엔드는 성공 값을 반환해야합니다.. API에 오류 (유효한 이메일, 비밀번호 없음)가 있으면HTTP클라이언트에게 오류가 발생했습니다.

코르헤더는 Server Part에서 구현되어야합니다.

  • login.ts에서 나는 userData = { "이메일": "", "password": ""}}을 선언했습니다. 그게 왜 null을 보여주는 것입니다. - Raghav
  • 정지. 너 없니?credentials또는res? - Konstantin Okhotnick
  • credentialsnull 일 수 없습니다. 과res있습니다. 때문에resapi에서 변수입니다 (let apiUrl = & # 39;192.168.1.10/honeybee/HoneyApi/' ;;) - Konstantin Okhotnick
  • null 값을 사용하고 있기 때문에 json null 오류가 표시됩니다. null 오류를 해결할 해답을 제공해 주시겠습니까? - Raghav
  • login.html에서 값을 가져와야합니다. - Raghav
1

다음과 같이 메소드를 변경하십시오.

ts rest.api.ts 파일에서

getUsers(credentials, type) {
    return new Promise((resolve, reject) => {
      var headers = new Headers();
      headers.append('Access-Control-Allow-Origin' , '*');
      headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
      headers.append('Accept','application/json');
      headers.append('content-type','application/json');

      this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
        .subscribe(res => {
          resolve(res); ----- Change like this
        }, (err) => {
          reject(err);
        });
    });
  }

너의loginpage.ts파일

   getloginUsers(){
    this.restProvider.getUsers(this.userData,'user_Login').then((result) => {
    if(result){
     this.responseData = result.json();
     if(this.responseData.userData){
     console.log(this.responseData);
     console.log("User Details");
     this.navCtrl.push(ListPage);
     }
     else{
       console.log("Incorrect Details"); }
    }
     }
     , (err) => {
     // Error log
   });

 }

  • login.ts에서 나는 userData = { "이메일": "", "password": ""}}을 선언했습니다. 그게 왜 null을 보여주는 것입니다. - Raghav
  • 방법? 나는 그렇게 생각하지 않는다. - Anand Raj
  • loginpage.ts에서 userData = { "email": "", "password": ""}를 선언했으며 this.userData가 null을 취하고 있습니다. - Raghav
  • 따라서 응용 프로그램을 통해 값을 입력하면 userData에 자동으로 바인딩됩니다. - Anand Raj
0

또한, 약속 대신에 관찰 할 수있는 것을 반환하는 것이 더 쉽지 않을까요?

return this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers});

0

문제는 문제를 일으키는 HttpClient의 restapi.ts 생성자에 있습니다.

  constructor(public http: HttpClient) {
    console.log('Hello RestapiProvider Provider');
  }

이것으로 변경하십시오,

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

이 부분에 오류가 있습니다.{headers: headers}여기에 오류가 있습니다 :

'{headers : Headers; } '에 할당 할 수 없습니다.   형식의 매개 변수 '{headers ?: HttpHeaders | {[header : 문자열] :   문자열 | 끈[]; }; 관찰 : "몸"; params ?: Ht ... '. 유형   '헤더'속성이 호환되지 않습니다.       '헤더'유형을 'HttpHeaders | {[header : string] : 문자열 | 끈[]; } '.         '헤더'유형을 '{[헤더 : 문자열] : 문자열 | 끈[]; } '.           '헤더'유형에 색인 서명이 없습니다.

오류는 매우 깨끗하기 때문에 설명이 필요하지 않습니다. 코드를 변경하면 코드가 문제없이 작동합니다. 나는 나의 현지에서 시험했다.

연결된 질문

최근 질문