Почему после смены роута не удаётся прочитать сохранённое в localstorage значение?

Question

[Дмитрий Кузнецов]

Продолжаю перенос frontend сайта на vuejs и столкнулся с одной проблемой - localstorage ведёт себя странно.

Цикл:
1. Авторизуемся с данными и получаем данные пользователя, от туда берём id пользователя и заносим в localstorage (в localstorage он отображается верно).
2. Далее переносимся на другую страницу и в меню мы получаем и помещаем id пользователя из localstorage.
Но почему то в ссылке этого значения нет.

Login.Vue:

this.axios.post("/api/...", data)
                    .then(response => {
                        // Если аутентификация прошла успешно
                        // Какой то код...

                        // Получаем данные о пользователе
                        this.axios.get('/api/v1/user')
                        .then(response => {
                            let User = response.data
                            localStorage.setItem('user', response.data)
                            localStorage.setItem('id_user', response.data.id)
                        })

                        this.$router.push({name: 'feed'})
                    })

Далее нас перекидывает на страницу Feed с боковым меню Left.vue:

<template>
    <div class="p-3 bg-light">
        <b-nav vertical>
            <b-nav-item :to="{name: 'account', params: {id: idUser}}" v-if="isAuth">Профиль</b-nav-item>
            <b-nav-item :to="{name: 'feed'}" v-if="isAuth">Новости</b-nav-item>

            <b-nav-item :to="{name: 'welcome'}" v-if="!isAuth" exact>Главная</b-nav-item>
            <b-nav-item :to="{name: 'about'}" v-if="!isAuth">О нас</b-nav-item>
        </b-nav>

        <b-nav vertical>
            <b-nav-item :to="{name: 'auth.login'}" v-if="!isAuth">Войти</b-nav-item>
            <b-nav-item :to="{name: 'auth.register'}" v-if="!isAuth">Регистрация</b-nav-item>
        </b-nav>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                idUser: localStorage.getItem('id_user'),
                isAuth: this.$auth.authCheck()
            }
        },

        created() {
            this.isAuth = this.$auth.authCheck()
            this.idUser = localStorage.getItem('id_user')
        },

        updated(){
            this.isAuth = this.$auth.authCheck()
            this.idUser = localStorage.getItem('id_user')
        },

        watch: {
            '$route': 'authCheck'
        },

        methods: {
            authCheck() {
                if(this.$auth.authCheck()){
                    this.idUser = localStorage.getItem('id_user')
                    this.isAuth = true
                } else {
                    this.isAuth = false
                }
            }
        }
    }
</script>

И здесь idUser не работает, только после перезагрузки страницы.
Также, почему-то я не могу получить из localstorage 'user' - пишет '[object Object]'.

В чём проблема?

PS: Если есть какие-то другие, более нормальные, решения по хранению данных, то рад буду услышать.
PS: читал про Vuex, что мол может хранить данные, но не разобрался с нею.

Answer 1

[0xD34F]

И здесь idUser не работает, только после перезагрузки страницы.

Ну так наверное надо бы на страницу Feed переходить после того, как пользователь будет сохранён в localStorage. Т.е., this.$router.push({name: 'feed'}) следует выполнять в колбеке запроса получения данных пользователя.

Также, почему-то я не могу получить из localstorage 'user' - пишет '[object Object]'.

Неудивительно. Ведь это объект. При сохранении в localStorage делайте JSON.stringify, а когда достаёте - JSON.parse.

Comments

[Дмитрий Кузнецов]

Спасибо. Пофиксил)

[Дмитрий Кузнецов]

Нужен ваш совет. Где лучше хранить данные о пользователе?