I am working in a iconic project
Where after user authentication store’s the token and redirect to the home page. In the home page it call the api and update the home page as per the response
But after the authentication when redirect to the home page api response comming but content not getting updated.
After the first time every time user Directly goes to the home page. It works perfectly fine. Call api and update the content but with the navigation login to home page it is not working.
You are going to need to provide more information like if you are using any framework with Ionic (Angular, Vue, or React). And some code snippets would be useful.
It kinda sounds like a lifecycle problem. Ionic handles the component lifecycle differently. You can read up on that in the docs. Here is a link to the Vue docs for example - Vue Lifecycle | Ionic Documentation.
Login page
import { Component, OnInit } from ‘@angular/core’;
import { MenuController } from ‘@ionic/angular’;
import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
import { ApiService } from ‘…/services/api/api.service’;
import { catchError } from ‘rxjs/operators’;
import { throwError } from ‘rxjs’;
import { ToastService } from ‘…/services/toast/toast.service’;
import { StorageService } from ‘…/services/storage/storage.service’;
import { Router } from ‘@angular/router’;
import { LoaderService } from ‘…/services/loader/loader.service’;
@Component({
selector: ‘app-login’,
templateUrl: ‘./login.page.html’,
styleUrls: [‘./login.page.scss’],
})
export class LoginPage implements OnInit {
user = {
mobileNumber: ‘’,
password: ‘’
};
login_page_content: string = ‘’;
constructor(
private menuCtrl: MenuController,
private http: HttpClient,
private apiService: ApiService,
private toastService: ToastService,
private storageService: StorageService,
private router: Router,
private loaderService: LoaderService
) { }
async login(form: any) {
if (form.valid) {
this.loaderService.showLoading();
const apiUrl = this.apiService.getApiUrl('login');
const body = {
mobile_number: this.user.mobileNumber,
password: this.user.password
};
this.http.post(apiUrl, body).pipe(
catchError((error) => {
let errorMessage = "An error Occured";
if (error.status == 400) { // HTTP_BAD_REQUEST
errorMessage = error.error.error;
} else if (error.status === 404) { // HTTP_NOT_FOUND
errorMessage = error.error.error;
} else if (error.status === 403) { // HTTP_FORBIDDEN
errorMessage = error.error.error;
} else if (error.status === 401) { // HTTP_UNAUTHORIZED
errorMessage = error.error.error;
}
this.loaderService.hideLoaderWithDelay();
this.toastService.showToast(errorMessage);
return throwError(error);
})
).subscribe(
(response: any) => {
this.storageService.setToken(response.token).then(() => {
this.loaderService.hideLoaderWithDelay();
this.router.navigate(['/home']);
});
},
(error) => {
if (error.status == 403) {
const mobileNumber = this.user.mobileNumber;
this.loaderService.hideLoaderWithDelay();
this.router.navigate(['/sign-up-otp'], { queryParams: { mobileNumber } });
}
console.error(error);
}
);
this.loaderService.hideLoaderWithDelay();
}
}
ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ionViewDidLeave() {
this.menuCtrl.enable(true);
}
ngOnInit() {
this.fetchData();
}
fetchData() {
const apiUrl = this.apiService.getApiUrl('login_page');
this.http.get<any>(apiUrl).subscribe(
(response) => {
this.login_page_content = response.login_page_content.value;
console.log(response.login_page_content);
console.log(response.login_page_content.value);
},
(error) => {
console.log('Error:', error);
}
);
}
}
Home page
import { Component, OnInit } from ‘@angular/core’;
import { StorageService } from ‘…/services/storage/storage.service’;
import { Router } from ‘@angular/router’;
import { Platform } from ‘@ionic/angular’;
import { ApiService } from ‘…/services/api/api.service’;
import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
import { LoaderService } from ‘…/services/loader/loader.service’;
import { ChangeDetectorRef } from ‘@angular/core’;
import { ActivatedRoute } from ‘@angular/router’;
@Component({
selector: ‘app-home’,
templateUrl: ‘./home.page.html’,
styleUrls: [‘./home.page.scss’],
})
export class HomePage implements OnInit {
user_id: string = ‘’;
name: string = ‘’;
walletBalance: string = ‘’;
whatsapp_number: string = ‘’;
whatsapp_message: string = ‘’;
main_result: any = ;
result: any = ;
card_bg: string = ‘’;
scroll_content: string = ‘’;
constructor(
private storageService: StorageService,
private router: Router,
private platform: Platform,
private http: HttpClient,
private apiService: ApiService,
private loaderService: LoaderService,
private changeDetectorRef: ChangeDetectorRef,
private activatedRoute: ActivatedRoute
) { }
ngOnInit() {
this.router.navigate([‘tabs/home’]);
this.fetchData();
}
async fetchData() {
const token = await this.storageService.getToken();
if (token) {
const headers = new HttpHeaders().set('Authorization', token);
const apiUrl = this.apiService.getApiUrl('home_page');
this.http.post<any>(apiUrl, {}, {headers}).subscribe(
(response) => {
console.log(response);
this.user_id = response.user_id;
this.name = response.name;
this.walletBalance = response.walletBalance;
this.whatsapp_number = response.whatsapp_number.value;
this.whatsapp_message = response.whatsapp_message.value;
this.main_result = response.main_result;
this.result = response.result;
this.scroll_content = response.scroll_content;
this.storageService.setWalletBalance(this.walletBalance)
this.changeDetectorRef.detectChanges()
},
(error) => {
console.log(error);
}
);
}
}
ionViewDidEnter() {
this.platform.backButton.subscribeWithPriority(10, () => {
if (this.platform.is(‘android’) && (this.router.url === ‘/tabs/home’ || this.router.url === ‘/tabs/game’ || this.router.url === ‘/tabs/wallet’)) {
(navigator as any).app.exitApp();
}
});
}
refreshPage(event: any) {
this.fetchData();
event.target.complete();
}
}
IONIC 7
“@capacitor/app”: “5.0.7”,
“@capacitor/core”: “5.7.1”,
“@angular/core”: “^16.0.0”,
As I linked in my comment, please use proper code blocks so we can easily read your code.