Feathers vuex : user is no longer logged in after refresh

Question

I am new to feathers and vue js I don't understand this, when i log in a user the v-if directives works on the navbar, but when i refresh the page i notice that the user is no longer logged in still the JWT is stored in the localStorage.

App-Navbar.vue

<template>
  <div>
    <q-header bordered class="bg-white">
      <q-toolbar>
        <div class="q-gutter-sm" v-if="!user">

          <q-btn to="/login" />
          <q-btn to="/signup" />

        </div>
        <div class="q-gutter-sm" v-if="user">

          <q-btn @click="logout"/>
        </div>

      </q-toolbar>
    </q-header>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {

methods: {
    ...mapActions("auth", { authLogout: "logout" }),
    logout() {
      this.authLogout().then(() => this.$router.push("/login"));
    }
  },
  computed: {
    ...mapState("auth", { user: "payload" })
  }
};
</script>

@lfaruki, how can i prevent that from happening in this case? — seddka, May 29 '20 at 05:49
you cant, it will be refreshed after every page refresh, you need to think about how to refetch the data after page loading — bill.gates, May 29 '20 at 05:51
check out this https://stackoverflow.com/questions/43027499/vuex-state-on-page-refresh — bill.gates, May 29 '20 at 05:52
I'm not sure if this a good practice but what you referred to me helped me, using `vuex-persistedstate` helped me solve the problem. Thank you @lfaruki — seddka, May 29 '20 at 06:13

Cristiano Soleti · Answer 1 · 2020-05-29T09:02:20.950

0

You just need some logic to fetch your token on refresh. You will first need to save it somewhere, let's say sessionStorage.

You can use vuex-persistedstate as you mentioned, but a lighter solution would be just setting your user property in the state of the store like this

user: sessionStorage.getItem(yourkey) ?? null

edited May 29 '20 at 09:02

answered May 29 '20 at 06:29

Cristiano Soleti

805
7
12

Where do i put this logic? – seddka May 29 '20 at 07:56
Wherever you have your user property defined - which I assume is the state. – Cristiano Soleti May 29 '20 at 08:03
I am confused about the key property – seddka May 29 '20 at 08:11
You first need to save your property in sessionStorage. And then fetch it. Nothing hard about it. – Cristiano Soleti May 29 '20 at 09:04

Feathers vuex : user is no longer logged in after refresh

1 Answers1