CODEWITHSUNDEEP
angularionic-frameworkionic4
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

My Ionic App is continuously loading after setting the storage in Ionic 4

I am working in my Ionic 4 app and I am setting the User ID in the storage for showing the login and logout button.

This is my userlogin.page.ts:

this.chakapi.loginUser(userdetailslogin, 'userLogin').subscribe((data) => {
    if (data) {
        this.responseEdit = data;
        if (this.responseEdit.status === 'success') {
          this.storage.set('ID', this.responseEdit.data.id);
          this.chakapi.setUserID(this.responseEdit.data.id);
          this.presentAlertConfirm('Login Successful', 1);
        } else {
          this.presentAlertConfirm('Either You are not registered Or not approved user.', 0);
        }
    }
});

In this ts file, I am setting the storage.

This is app.component.html:

<ion-title color="myheadtitle" *ngIf="!chakapi.isLoggednIn()" slot="end">Register/Login</ion-title>
<ion-title color="myheadtitle" *ngIf="chakapi.isLoggednIn()" slot="end" (click)="logoutClicked()">Logout</ion-title>

In this html, I have two buttons, for login and for logout.

This is my Service: chakapiservice:

setUserID($token) {
  this.storage.set('ID', $token);
}
getUserID() {
  return this.storage.get('ID');
}
isLoggednIn() {
  return this.getUserID() !== null;
}

This is my app.component.ts:

logoutClicked() {
 this.storage.remove('ID').then(() => {
  this.menuclick2 = false;
  this.menuclick = true;
  this.router.navigate(['/tabs/tab1']);
 });
}

I don't know why after applying this code, my app keep loading. May be because of return this.storage.get('ID');.

Any help is much appreciated.

Upvotes: 1

Views: 407

Answers (2)

Bardr
Bardr

Reputation: 2559

Try this in your template:

<ion-title color="myheadtitle" *ngIf="!chakapi.getUserID() | async" slot="end">Register/Login</ion-title>
<ion-title color="myheadtitle" *ngIf="chakapi.getUserID() | async" slot="end" (click)="logoutClicked()">Logout</ion-title>

If this.storage.get('ID'); returns Promise this should work. And you don't have to check whether returned value is null or not because null is false actually.

EDIT: Also why are you setting the ID twice?

this.storage.set('ID', this.responseEdit.data.id);
this.chakapi.setUserID(this.responseEdit.data.id);

You can get rid of one of them.

EDIT2: Ultimately you can extend your chakapiservice to use subject for storing whether user is logged in or not: 

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChakApiService {
  // Add behavior subject.
  private isLoggedIn = new BehaviorSubject<boolean>(this.getCredentials() !== null);
  public isLoggedIn$ = this.isLoggedIn.asObservable();

  constructor() { }

  setUserID($token) {
    this.storage.set('ID', $token);
    localStorage.setItem('token', $token);
    this.isLoggedIn.next(true);
  }

  getCredentials(): string {
    return localStorage.getItem('token');
  }

  // Rest of the code omitted for brevity.
}

And then use it in app.component.html:

<ion-title color="myheadtitle" *ngIf="!chakapi.isLoggedIn$ | async" slot="end">Register/Login</ion-title>
<ion-title color="myheadtitle" *ngIf="chakapi.isLoggedIn$ | async" slot="end" (click)="logoutClicked()">Logout</ion-title>

Also you should add localStorage.clear() to your logoutClicked() method to remove token from localStorage.

Upvotes: 1

Kishan Oza
Kishan Oza

Reputation: 1735

Storage.get is async try this

this.storage.get('ID').then((val) => {
   return val !== null ? true : false
  });

and 

isLoggednIn() { 
return this.getUserID();
 }

Rest of the code looks fine for me :) make sure you have done all the settings as describe here : https://ionicframework.com/docs/building/storage

Upvotes: 1

Related Questions