0

Я хочу использовать localStorage, чтобы при перезагрузке страницы данные сохранялись

Я использую vuex, чтобы следить за человеком, зарегистрированным или нет. И хочу, чтобы, когда страница была загружена, человек был зарегистрирован,если он уже авторизовался.

Мой Vuex

export default {
    state:{
        isRegistered:false
    },
    actions:{
        registrate({commit}) {
            commit("login")
        },
        exit({commit}) {
            commit("logout")
        }
    },
    mutations:{
        login(state) {
            state.isRegistered=true;
        },
        logout(state) {
            state.isRegistered=false
        }
    },
    getters:{
        IS_REGISTERED(state){
            return state.isRegistered
        }
    }
}

Мои ссылки в другом компоненте

<template>
    <div class="Links" ref="squareExit">
        <header class="hat">
            <div class="header__buttons">
               
                <div v-if="IS_REGISTERED" id="exit--tittle" @click="openModal">
                    <button @click="exitFromSystem">Выйти из аккаунта</button>
                </div>

                <router-link :to="{name:'registration'}">
                    <button id="registration" v-if="!IS_REGISTERED">Регистрация</button>
                </router-link>
            </div>
        </header>
    </div>
</template>


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

export default {
    name: "theLinks",
    data() {
        return {
            isModalOpen: false,
            searchValue: ""
        }
    },
    methods: {
        ...mapActions(["exit"]),
        exitFromSystem() {
            this.isModalOpen = false
            this.exit() // метод в Vuex
        }
    },
    
}

Где лучше всего использовать localStorage на сохранение пользователься и как?

1
  • у меня в приложении это реализовано следующим образом(опишу упрощенно): пользователь авторизуется и получает UserName, AccessToken,RefreshToken и дату истечения учетных данных, эти данные я сохраняю в localStorage, при загрузке приложения я проверяю наличие сохраненных данных и если они есть считаю пользователя авторизованным, восстановление авторизации делаю в main.js vue приложения
    – Bald
    Commented 2 авг. 2023 в 9:50

1 ответ 1

0
export default {
    state:{
        isRegistered:JSON.parse(window.localStorage.getItem('isRegistered'))
    },
    actions:{
        registrate({commit}) {
            commit("login")
        },
        exit({commit}) {
            commit("logout")
        }
    },
    mutations:{
        login(state) {
            state.isRegistered=true;
            window.localStorage.setItem('isRegistered', true)
        },
        logout(state) {
            state.isRegistered=false
            window.localStorage.setItem('isRegistered', false)
        }
    },
    getters:{
        IS_REGISTERED(state){
            return state.isRegistered
        }
    }
}
2
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 12 авг. 2023 в 11:39
  • @РоманСтрельников,спасибо огромное Commented 23 авг. 2023 в 10:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.