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