When utilizing Ionic Firebase, the user profile saved in the sidemenu is stored using the Events class. However, the saved profile disappears as soon as

Hello there. I am currently working on displaying my user's information in the sidemenu, and after some research, I found that using the Events class might solve this issue. However, I have noticed that the data saved in subscribe gets destroyed whenever I refresh the page or close the application. How can I ensure that the data persists even after the application is closed or when I refresh the browser? All imports are functioning correctly, but it seems like saving the data is the main problem here.

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any;
  profileName: string;
  profileEmail: string;
  user: any;

  pages: Array<{title: string, component: any}>;

  constructor(public events: Events, public platform: Platform,
   public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    if(localStorage.getItem('loggedIn')==='1')
    {
      this.events.subscribe('user', (user)=>{
        this.profileName = user.firstname + ' ' + user.lastname,
        this.profileEmail = user.email
        console.log(user);
      });
      this.pages = [
        { title: 'Home', component: HomePage },
        { title: 'Messages', component: ChatlistPage }
      ];
      this.rootPage = HomePage; //HomePage
    }
    else{
      this.rootPage = LoginPage;
    }
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }

  logoutUser() {
    localStorage.clear();
    window.localStorage.clear();
    this.nav.setRoot(LoginPage);
  }
}

Answer №1

It seems like you are assuming that the published event data will be accessible even after the app is refreshed, closed, or reopened in the browser. However, according to my API reference, the state of the event data is not saved anywhere in storage. This is actually the correct behavior for a publish/subscribe system. If you need to access the published data later on, you should save its state either in storage or a database for future use. The temporary data queue is typically cleared once the subscribed channels receive the data.

I don't see where you have written the code to publish the data. It's important to separate components so that it's clear which component is publishing and which one is subscribed to the topic. This makes it easier to debug any issues that may arise.

For more information on pub/sub, you can read about it here.

https://i.sstatic.net/33UBC.png

Answer №2

It is advisable not to structure your application in this manner. The proper way to handle user authentication state is by utilizing

firebase.auth().onAuthStateChanged(function(user)...
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Performing synchronous POST requests to manipulate data in a SQL database using AJAX

My goal is to send synchronous calls to a page that will handle the SQL insertion of words I am posting. However, due to the large number of chunks and the synchronous nature of SQL, I want each AJAX call to be processed one after another. for (chunk = 1; ...

Validate if the user is actively scrolling; if not, automatically adjust the scroll position to the bottom

I am currently developing a chat site where the chat box updates every 200 milliseconds. I have managed to reposition the scrollbar to the bottom when a new message is loaded. However, I encountered a problem - whenever a user tries to scroll to the top, t ...

Issue with undefined object in ExpressJS PUT method

Attempting to utilize the PUT method for updating a record in my database, I encountered an issue with the object not being defined. ReferenceError: blogpost is not defined Following this tutorial for routing steps, I noticed that while the variable is d ...

Tips for identifying when v8 heap utilization in Node.js is nearing its limit

Currently, my script includes the following code: const v8 = require('v8'); let heap = v8.getHeapStatistics(); let usage = 100 / heap.heap_size_limit * heap.used_heap_size; if (usage > 90) { console.log(`V8 heap usage close to the limit ...

Limiting the data obtained from the API to extract only the desired values

Using an API, I am retrieving customer information and displaying it in the console. The code snippet used for this operation is: if (this.readyState === 4) { console.log('Body:', this.responseText); } }; This returns a JSON object with v ...

Tips for saving and accessing the value of an md-select ng-model in an AngularJS dialog?

Currently, I am utilizing a template to populate an md-dialog box: The procedure for displaying the dialog: $scope.showDialog = function(element) { var parentEl = angular.element(document.body); $mdDialog.show({ template: element, scope: $scope, pr ...

Unable to get OverlayView() from Google Maps API to function within an AngularJS directive

My directive "map" is encountering a namespace issue. The mapInit() function is working perfectly, but there seems to be an error with my OverlayView() object that I can't seem to resolve. This is the initial step outlined in the Google documentation ...

Utilize Node.js and Socket.IO to download a PNG image in a web browser

Looking for assistance in saving an image from Flash to a server using node.js. Below is my code snippet: var pngEncoder:PNGEncoder = new PNGEncoder(); var pngStream:ByteArray = PNGEncoder.encode(bmd); socket.send(pngStream,"image"); Above is the Flash c ...

Simply click on the image to open it in a lightbox view with a thumbnail using jQuery

I have implemented a feature using fancybox to display images in a lightbox with thumbnail images. My requirement is that when a user clicks on an image, the clicked image should be displayed first in the lightbox and the rest of the images should not be s ...

"The Material UI date picker is encountering an issue with the error prop, which is being evaluated

I have developed a date picker that utilizes the Jalali calendar. While attempting to pass error checking using the error prop in the following code: <LocalizationProvider dateAdapter={AdapterJalali}> <MobileDatePicker label={lab ...

Implementing event listeners with Angular UI-Router

Currently, I am working with Angular 1.4.5 and Angular Ui Router. I am facing an issue where I am trying to utilize addEventListener to execute a function when a text field is blurred. The challenge I am encountering is that during the load state, the elem ...

The dynamic form functionality is experiencing issues when incorporating ng-container and ng-template

I'm currently working on a dynamic form that fetches form fields from an API. I've attempted to use ng-container & ng-template to reuse the formgroup multiple times, but it's not functioning as anticipated. Interestingly, when I revert b ...

Implementation of Ionic Tabs with Hidden Back Button

Is there a way to hide the back button for a specific tab in my ionic app without affecting the rest of the page? I tried adding "hide-back-button="true" to the tab code, but it didn't work as expected. I want to achieve something like this: <ion ...

Issues with displaying public images in Next.js production build are being reported

My Next.js app is deployed on Heroku. Images show up when I develop locally, but once pushed to Heroku and checked on the live site, the images return a 404 error. The images (.png) are stored in a public folder within my project, and I reference them in t ...

Attempting to extract decibel levels from an audio file using JavaScript

I've been exploring the details provided here: Is there a way get something like decibel levels from an audio file and transform that information into a json array? However, when attempting to execute the JSBin snippet below, I encountered some conf ...

Tips for creating a Next.js "Link" component with an optional "href" property

I've created a custom React function using typescript for the Next.js Link component. The "href" property is necessary for the "Link" to be used anywhere, so it couldn't be utilized as a button that functions as a submit button in forms. import N ...

The challenge of transferring documents to the server

There is a form on the webpage where users can select a file and click a button to send it. <form enctype="multipart/form-data"> <input type="file" id="fileInput" /> <button type="button&quo ...

Method with undefined constructor parameter in Typescript

Understanding how to effectively use Typescript and Angularjs in conjunction has been a challenge for me. Despite reading numerous blog posts and consulting the official documentation for both projects, the concepts just haven't fully clicked. My Ang ...

restructure array upon alteration of data

Here's the current structure of an array stored in a $scope variable: $scope.objects: [ {selected: true, description: 'string1'}, {selected: false, description: 'string2'}, {selected: true, description: 'string3'}, ...

Is it feasible to save BoxGeometries or MeshLambertMaterial in an array using Three.js?

var taCubeGeometryArray = new Array(); var taCubeMaterialArray = new Array(); taCubeGeometryArray.push(new THREE.BoxGeometry( .5, .5, .5)); taCubeMaterialArray.push(new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture( "image.png" )})); Could ...