1

I actually do not understand what happen when user hits thr reload page on the web browser ...

Getting user data displayed after login on first pass is OK... store.state data are available ( so are localStorage caching data) But if I reload the page the even if store.sate data are available they are NOT displayed anymore ..

see the console.log

=== starts displaying home page ===================

console.log

ROUTER BEFORE to:  
{name: "Home", meta: {…}, path: "/home", hash: "", query: {…}, …}

App.vue?26cd:72 APP VUE - beforeCreate initialiseStore

root.js?f07d:207 mutation initialise_store

main.js?1c90:61 MAIN.JS FB auth().onAuthStateChanged() - user not logged in

root.js?f07d:112 STORE ACTION setUser:  null

backend.js:1  vue-devtools  Detected Vue v2.5.16 

router.js?15ee:71 ROUTER BEFORE to:  
{name: "Users", meta: {…}, path: "/users", hash: "", query: {…}, …}

=== Users view - display login form ========

          // --- onSubmit method code ----
          onSubmit()
          ....
          this.$store.dispatch('signUserIn', { email: this.email, password: this.password })
            .then(result => {
              console.log('SIGNIN SUCCESSFUL: ', result)
              this.$router.push('member')
            })

console.log

main.js?1c90:59 MAIN.JS FB auth().onAuthStateChanged() - user authenticated
store/root.js?f07d:104 END SIGNIN PROCESS
Sectio1.vue?91e7:191 SIGNIN SUCCESSFUL:  ok

router.js?15ee:71 ROUTER BEFORE to:  
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:73 ROUTER protected page:  
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:79 ROUTER user authenticated:  
Lk {…}

== Member view - display user / account data ======== user & account data displayed

user & account data in store.state && in localStorage()

BUT NOW WHEN USER HIT RELOAD PAGE BUTTON IN BROWSER

console.log

ROUTER BEFORE to:  
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:73 ROUTER protected page:  
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:79 ROUTER user authenticated:  {"uid":"kRdsicIfuRYSTj2sWxfejhMevtr2","displayName":null,"photoURL":null,"email":"[email protected]","emailVerified":false,"phoneNumber":null,"isAnonymous":false,"providerData":[{"uid":"[email protected]","displayName":null,"photoURL":null,"email":"[email protected]","phoneNumber":null,"providerId":"password"}],"apiKey":"AIzaSyBhOu_bc_8NdQW7EOEFHfjljLnNwbu3guk","appName":"[DEFAULT]","authDomain":null,"stsTokenManager":{"apiKey":"AIzaSyBhOu_...9ufFog","expirationTime":1530868322723},"redirectEventId":null,"lastLoginAt":"1530864722000","createdAt":"1530111422000"}

App.vue?26cd:72 APP VUE - beforeCreate initialiseStore
store/root.js?f07d:207 mutation initialise_store

// --- initialise_store mutation code ---- if (localStorage.getItem('store')) { // Replace the state object with the stored item console.log('mutation initialise_store') this.replaceState(Object.assign(state, JSON.parse(localStorage.getItem('store')))) }

console.log

backend.js:1  vue-devtools  Detected Vue v2.5.16 
main.js?1c90:59 MAIN.JS FB auth().onAuthStateChanged() - user authenticated

== Member view - display user / account data ======== user & account data not displayed ( using v-model & getters )

user & account data ARE in store.state && in localStorage()

Member View - Section1 component

      <template>
         ....
         <v-card-text class="grow">
             <v-text-field disabled v-model="user.email" ....></v-text-field>
             <v-text-field disabled v-model="user.name" ....></v-text-field>
         ....
            <v-text-field disabled v-model="account.givenName" ....></v-text-field>
         ....
      </template>

      <script>
      import { mapGetters } from 'vuex'
      ....
      computed: {
        ...mapGetters(['user', 'account']),
      ...
      <s/cript>

1 Answer 1

2

SOLVED ...

my store.state was initialised as following :

export const state = {
    .. 
    user: localStorage.getItem('user') || null,
    account: localStorage.getItem('account') || null

which is WRONG user & account are Firebase objects that should be parsed to be stored as strings in localStorage ...

 export const state = {
    .. 
    user: JSON.parse(localStorage.getItem('user')) || null,
    account: JSON.parse(localStorage.getItem('account')) || null

thane the objects are available from localStorage after refreshing the page

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.