Данные локального хранилища возвращают неопределенное или нулевое значение - PullRequest
0 голосов
/ 09 мая 2020

Я новичок в Ioni c, и я пытаюсь использовать локальное хранилище, моя проблема заключается в следующем ...

У меня есть форма входа, которая после успешной обработки входа в систему сохраняет некоторые данные из ответа сервера в локальное хранилище, а затем перенаправляет на домашнюю страницу. Когда домашняя страница запускает ngOnInit, я пытаюсь получить данные из локального хранилища и отобразить их в переменной call customerData в моем файле Html. Но после регистрации переменная customerData, которая должна отображать данные пользователя, в первый раз пуста, и при использовании журнала консоли для просмотра значения указано Undefined.

Но когда я проверяю данные в локальном хранилище после при успешном входе в систему вся необходимая мне информация о клиенте сохраняется и она там.

Когда я обновляю sh страницу, она показывает все, как должно быть.

Я думаю, что в ней что-то есть делать со значениями в localStorage, которые не готовы, когда я пытаюсь отобразить их на странице, и когда я обновляю sh, страница уже готова.

Пожалуйста, мне нужна ваша помощь. Мой код ниже.

login.ts

  loginForm(){
    this.platform.ready().then(() => {
      if((this.password != '') &&  (this.CFS.validateEmail(this.email))) {


        this.auth.loginCustomer(this.email,this.password).then((response) => {
        if(response['token']){

        console.log('Returned Token: ',response['token']);
        console.log('Returned user enamil: ',response['user_email']);   

          this.auth.getUserData(this.email).subscribe((userData) => {
          this.customerData =  userData;
           console.log('Customer Data: ', this.customerData);
          let currentUserId = this.customerData[0].id;
          localStorage.setItem('currentUserId', currentUserId);

          if(currentUserId){
            let found = localStorage.getItem('currentUserId');
            console.log('local storage id', found);
          }

           this.CFS.presentToast('Login successful', 'buttom',2000, 'success');


        });


          this.route.navigateByUrl('/home');

      } else {
        this.CFS.presentToast('Invalid username or password', 'buttom',2000,'danger');

      } 
    });
      } else {
        this.CFS.presentToast('Please fill  the form correctly', 'buttom',2000,'danger');

      }
    });

  }

home.ts

customerData: any ;
 ngOnInit() {  

      let isUserLoggedIn = localStorage.getItem('currentUserId');

      this.WC.getUserInfo(isUserLoggedIn).subscribe((data)=>{

        this.customerData = data;
        console.log('user data', this.customerData);
      }); 
}

Ответы [ 2 ]

0 голосов
/ 09 мая 2020

Функция внутри вызова метода подписки выполняется после получения ответа сервера (асинхронно). Таким образом, код для перехода на домашнюю страницу выполняется до кода, который выполняется после ответа сервера. Вы должны переместить строку this.route.navigateByUrl('/home'); внутри метода обратного вызова подписки следующим образом:

 loginForm(){
    this.platform.ready().then(() => {
      if((this.password != '') &&  (this.CFS.validateEmail(this.email))) {


        this.auth.loginCustomer(this.email,this.password).then((response) => {
        if(response['token']){

        console.log('Returned Token: ',response['token']);
        console.log('Returned user enamil: ',response['user_email']);   

          this.auth.getUserData(this.email).subscribe((userData) => {
          this.customerData =  userData;
           console.log('Customer Data: ', this.customerData);
          let currentUserId = this.customerData[0].id;
          localStorage.setItem('currentUserId', currentUserId);

          if(currentUserId){
            let found = localStorage.getItem('currentUserId');
            console.log('local storage id', found);
          }

           this.CFS.presentToast('Login successful', 'buttom',2000, 'success');

           this.route.navigateByUrl('/home');

        });


      } else {
        this.CFS.presentToast('Invalid username or password', 'buttom',2000,'danger');

      } 
    });
      } else {
        this.CFS.presentToast('Please fill  the form correctly', 'buttom',2000,'danger');

      }
    });

  }
0 голосов
/ 09 мая 2020

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

Итак, когда вы попадаете на домашнюю страницу, возможно, что данные еще не были сохранены в localStorage.

https://stackblitz.com/edit/ionic-64qb9r?file=app%2Fapp.component.ts

...