Vue.js, Vuex ukrywanie elementów

Question

Witam.

Wiem, że taki temat na forum już był jednak z tego co widzę jest martwy.

Chciałbym ukryć elementy strony dla użytkowników niezalogowanych i pokazać je po zalogowaniu. 

Moje logowanie po stronie front wygląda tak:

const state = {
  logged: false,
}
const getters = {
  logged: state => {
    return state.logged
  }
}
const actions = {
  getLogged({commit}, items) {
    axios.post('login', items)
      .then(result => {
        localStorage.setItem('token', result.data.token)
        commit('LOGGED')
      })
  }
}
const mutations = {
  LOGGED(state) {
    state.logged = true
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

i teraz w komponencie chcę zrobić coś takiego

<div class="account-block" v-if="!logged">
              <router-link to="/login"><span class="icon-login"></span> Zaloguj się</router-link>
              <router-link to="/register"><span class="icon-edit"></span> Zarejestruj się</router-link>
            </div>
            <div class="account-block text-right" v-else>
              <router-link to="/account"><span class="icon-user"></span> Konto</router-link>
            </div>

i nawet to działa, po zalogowaniu odpowiednie elementy są ukrywane i odpowiednie pokazywane. Jednak po odświeżeniu strony wszystko się "restartuje" i to co zostało ukryte jest pokazane

Answer 1

No niestety, ale to jest JavaScript i przeglądarka, w momencie restartu wszystko się odświeża do stanu początkowego. Możesz zapisać taką informację w localStorage'u, czego z przyczyn bezpieczeństwa nie polecam. Lepiej, gdybyś miał jakiś token i sprawdzał czy token istnieje, wtedy przywracasz store do stanu zalgoowany.

Inną opcją jest użycie persisten vuex. Wygooglaj sobie.

Comments

Zainstalowałem persisten vuex jednak nie za bardzo mogę znaleźć informację o tym jak on dokładnie działa i jak go użyć