Reputation: 1435
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
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
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