Я новичок в ionic / angular / typescript и cloudboost, и я пытаюсь заставить все это работать вместе.

Я начал новый ионный проект со стартовой темой "super".

Мне удалось поработать с функцией входа в систему cloudboost, но я столкнулся с некоторыми проблемами:

  • Мне не удалось использовать поставщика пользователей, поскольку он использует службу Http, а Cloudboost не предоставляет доступ к URL-адресу, а исходный результат является наблюдаемым.
  • Я не могу получить доступ к this в функции обратного вызова CBUser.logIn, он не определен. Я пробовал несколько способов с толстой стрелкой, но у меня ничего не вышло, поэтому на данный момент я справился с этим обходным путем:

    var falseThis = this;

Как я могу сделать его более чистым для машинописного текста?

Вот мой файл login.ts:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ModalController, IonicPage, NavController, ToastController } from 'ionic-angular';

import * as CB from 'cloudboost';
import { User } from '../../providers/providers';
import { MainPage } from '../pages';

import { ModalCguPage } from './modal-cgu';

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



export class LoginPage {
  // The account fields for the login form.
  // If you're using the username field with or without email, make
  // sure to add it to the type
  account: { username: string, password: string } = {
    username: 'defaultuser@defaultsite.co',
    password: '01231234'
  };

  // Our translated text strings
  private loginErrorString: string;
  private loginSuccessString: string;
  private redirectPageSuccess : any = MainPage;

  constructor(public navCtrl: NavController,
    public user: User,
    public toastCtrl: ToastController,
    public translateService: TranslateService,
    public modalCtrl: ModalController) {
    this.translateService.get('LOGIN_ERROR').subscribe((value) => {
      this.loginErrorString = value;
    })
    this.translateService.get('LOGIN_SUCCESS').subscribe((value) => {
      this.loginSuccessString = value;
    })



  }

  // Attempt to login in through our User service
  doLogin() {  
//  HERE : get back the main this to use it later
    var falseThis = this;

//  cloudboost login
    let CBUser = new CB.CloudUser();
    CBUser.set('username', this.account.username);
    CBUser.set('password', this.account.password);
    CBUser.logIn({
        success: function(user) {
            let toast = falseThis.toastCtrl.create({
              message: falseThis.loginSuccessString + ' ' + user.username,
              duration: 3000,
              position: 'top'
            });
            toast.present();

            falseThis.navCtrl.push(MainPage);
        }, error: function(error)  {
    //    error: function(error) {
            // Unable to log in
            let toast = falseThis.toastCtrl.create({
              message: falseThis.loginErrorString,
              duration: 3000,
              position: 'top'
            });
            toast.present();
        }

    });
  }
}

Ниже исходная функция, включенная в стартовый шаблон:

// Attempt to login in through our User service
  doLogin() {
    this.user.login(this.account).subscribe((resp) => {
      this.navCtrl.push(MainPage);
    }, (err) => {
      this.navCtrl.push(MainPage);
      // Unable to log in
      let toast = this.toastCtrl.create({
        message: this.loginErrorString,
        duration: 3000,
        position: 'top'
      });
      toast.present();
    });
  }

Если кто-то может прояснить ситуацию, я был бы очень признателен. Спасибо


ИЗМЕНИТЬ РАБОЧЕЕ РЕШЕНИЕ:

В login.ts

// Attempt to login in through our User service
  doLogin() {
    this.user.login(this.account).then( (user:any) => {
        console.log('user displayed ');
        console.log(user.username);

    //  login successful
        let toast = this.toastCtrl.create({
          message: this.loginSuccessString + user.username,
          duration: 3000,
          position: 'top'
        });
        toast.present();

        this.navCtrl.push(MainPage);
    }).catch( err => {
    // Unable to log in
      let toast = this.toastCtrl.create({
        message: this.loginErrorString,
        duration: 3000,
        position: 'top'
      });
      toast.present();
    });
  }

В user.ts:

login(account: any) {
         let CBUser = new CB.CloudUser();
         CBUser.set('username', account.username);
         CBUser.set('password', account.password);
         return new Promise((resolve, reject) =>{
             CBUser.logIn({
                 success: (user) => {
                 //Login successful
                     resolve(user)
                 },
                 error: (error) => {
                     reject(error)
                 //Error in user login.
                 }
             });
         });
     }
0
axx 3 Янв 2018 в 19:45

2 ответа

Лучший ответ

Я не могу получить доступ к этому в функции обратного вызова CBUser.logIn, он не определен. Я попробовал несколько способов с толстой стрелкой, но не сработало, поэтому на данный момент мне удалось обойтись этим обходным путем

Думаю, Пейс ответил на этот вопрос. Эта ссылка помогла мне, когда я столкнулся с этой проблемой стрелочные функции .

Для обратных вызовов CloudBoost используйте:

{
  success: (obj) => {
    //success
  },
  error: (err) => {
    //Error
  }
}

Мне не удалось использовать поставщика пользователей, поскольку он использует службу Http, а Cloudboost не предоставляет доступ к URL-адресу, а исходный результат является наблюдаемым.

Пользовательский провайдер - всего лишь пример кикстарта с Http-запросами. Чтобы использовать поставщика пользователей с cloudboost, я бы предложил изменить функцию входа в систему на что-то вроде

login(account) {
let CBUser = new CB.CloudUser();
CBUser.set('username', account.username);
CBUser.set('password', account.password);
return new Promise((resolve, reject) =>{
  CBUser.logIn({
    success: (user) => {
      //Login successful
      resolve(user)
    },
    error: (error) => {
      reject(error)
      //Error in user login.
    }
  })
 })
}

И вызовите функцию с помощью:

this.user.login(this.account).then( user => {
  //login successful
  this.navCtrl.push(MainPage);
}).catch( err => {
  this.navCtrl.push(MainPage);
  // Unable to log in
  let toast = this.toastCtrl.create({
    message: this.loginErrorString,
    duration: 3000,
    position: 'top'
  });
  toast.present();
});
1
Perzeuss 3 Янв 2018 в 17:33