web-dev-qa-db-fra.com

Authentification de connexion Ionic 3 à l'aide de l'API - Impossible de lire la propriété 'json' de null

Je fais l'authentification dans Ionic 3 en utilisant l'API mais dans le processus de connexion, l'erreur suivante s'affiche: Impossible de lire la propriété 'json' de null

Ce sont mes fournisseurs> 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);
        });
    });
  }
}

Ceci est mon 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
   });

 }

}

Ceci est mon 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>

Je reçois une propriété Impossible de lire la propriété 'json' de null lorsque je clique sur le bouton de connexion. Toute aide appréciée dans Advance. S'il vous plaît aider.

angularapihttpauthenticationionic3
10
user8531037

Premier:

ngModel work si vous ajoutez FormsModule dans le fichier de configuration.

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

Seconde:

Envoyez les données au format JSON, ajoutez 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());
}

et appelez loginpage (sans promesse)

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

Troisième:

Le back-end doit renvoyer la valeur de succès. Si votre API présente une erreur (aucun courrier électronique ni mot de passe valide), renvoyez HTTP error au client. 

CORS les en-têtes doivent être implémentés sur la partie serveur.

1
Konstantin Okhotnick

S'il vous plaît changer la méthode comme ça

Dans votre fichier 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);
        });
    });
  }

dans votre fichier 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
   });

 }
0
Anand Raj

Le problème réside dans votre constructeur restapi.ts, HttpClient, à l'origine du problème.

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

Changer cela en ceci,

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

Vous avez une erreur sur cette pièce {headers: headers} voici votre erreur:

Argument de type '{en-têtes: En-têtes; } 'n'est pas assignable à paramètre de type '{en-têtes ?: HttpHeaders | {[en-tête: chaîne de caractères]: chaîne | chaîne[]; }; observer ?: "corps"; params ?: Ht ... '. Types de les 'en-têtes' de propriété sont incompatibles . Le type 'En-têtes' n'est pas assignable au type 'HttpHeaders | {[en-tête: chaîne]: chaîne | chaîne[]; } '. Le type 'En-têtes' n'est pas assignable au type '{[en-tête: chaîne]: chaîne | chaîne[]; } '. La signature d'index est manquante dans le type 'En-têtes'.

Error est assez clair, donc n’a besoin d’aucune explication, votre code fonctionnera sans problème si vous faites ce changement. J'ai testé sur mon local.

0
Whatatimetobealive

En outre, ne serait-il pas plus facile de simplement retourner observable au lieu d'une promesse?

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