Best Practice to retrive logged in user


#1

What is the best practice to retrive data of logged In user to be available on every page.

For example i need the user picture, but the data must be loaded by an ajax request.

One was to have an ajax request on app initalization but how should i do that the best way?


#2

Vuex is recommended.
I’m using firebase for data storage, after users logged in, I commit their infos to vuex, and other pages or components will soon synchronize with those data automatically.:laughing:


#3

and when not using vue but basic lib in javascript? :stuck_out_tongue:

havnt managed to get along with vue yet


#4

Storing data in LocalStorage may be a solution. LocalStorage is a Html5 feature.
And if you want to manlipulate data conveniently in a lodash shorthand syntax, you can try this js lib:
Lowdb

By the way, the login sample of firebase stores data in localstorage.


#5

thanks for that information, but what i actually need to know is how can I handle it the right way because I am having the trouble that as soon as someone is logged in, older pages dont show as if the user is logged in,

one solution would be to reload the pages which is imo not a very slik solution but sofar is what i am doing.
because as soon as the user changes his profile picture, or what every, it is still cached so i have to reload. which is really imo not very convinient.

I am looking for a solution that would display data correctly without manually having to update it or reload pages

I am using compnent pages


#6

Sorry, I only know vue can update dom automatically.
And without vue, by using the pure framework7, you still need to manually update page by invoking ‘setState’ which is described in the lastest 3.1.0 updates.


#7

Before I use f7, I never used vue. Then I downloaded a f7-vue template, I found vue is simple and easy to use. F7 is my vue teacher.:rofl:


#8

The thing is my app is already so further in development that I dont wanan migrate it to vue yet maybe in the future release

Anyways thank you alot for that little hint.

Yet i have another question
my user date is stored in the root context should i change that to each component context? or how can i use setState with Root Context updates?

thank you alot you are very helpful :smiley:


#9

I recommend you to store user data into localstorage after login. Without reactive property, you should update each page or component manually, extract data from localstorage within page:init event.

Maybe a better solution is using custom event, I just come up with this idea when I’m typing this reply.
You can register a event for each dom who shows user info. In jq,

on: {
  pageInit() {
    const self = this;
    // bind event to current page which should has class="user-sync"
    $('#page-xxx.user-sync').bind('onAuthStateChanged', function(user) { // didn't check whether if dom7 has bind method, so I use jq instead
      self.$setState({
         user: user
      });
    });
    // extract data from localstorage
    self.$setState({
       user: JSON.parse(window.localStorage['user'])
    });
  }
}

and in the login component, append these code after user login:

window.localStorage.setItem('user', JSON.stringify(user));
$('.user-sync').trigger('onAuthStateChanged', user);

PS: I do not garentee those code will solve the problem, I dosen’t test.


#10

thank you alot :slight_smile: I will finish that app and try vue for the next one :slight_smile: