Как заставить метод vuejs дождаться данных с сервера?

Question

[Илья]

Народ, привет.
Пытаюсь подружиться с Vue.
До этого только бекенд. Делаю авторизацию в SPA приложении. Ситуация такая, при логине сохраняю в LocalStorage api_token и user_id. А уж потом в хранилище Vuex загружаю с сервера объект user. Все хорошо. Но когда нажимаю рефреш браузера, объект стирается с памяти, приходится подгружать с сервера user повторно. Без проблем, но это асинхронная операция и пока оно грузится везде в представление и логике выдает ошибки. user undefined. Я сделал переменную ready которая подтверждает что user загружен. Теперь везде проверяю, и чем дальше, тем чувствую, что я делаю "верх ногами" Подскажите куда копать? Как заставить метод vuejs дождаться данных с сервера?

Comments

[Yeldos Adetbekov]

Так решение вопроса - все то же самое. При обновлений ничего не сохранится, кроме токена в LocalStorage. Может каждый раз проверять в actions? Если нашли решение, не забудьте отписаться)

[Илья]

Решение нашлось. Пока не подгрузится юзер, не показываем приложение

Answer 1

[Nik]

возможно Вам это поможет
vuex

const auth = {
  state: {
    authUser: null
  },
  actions: {
    nuxtServerInit ({ commit}, {req}) {
      if (req.session && req.session.authUser) {
        commit('SET_USER', req.session.authUser)
      }
    },
    login ({ commit, username, password}) {
      return axios.post('/api/loin', {
        username,
        password
      })
        .then((res) => {
          commit('SET_USER', res.data)
        })
        .catch((error) => {
          if (error.response.status === 401) {
            throw new Error('Bad credentials')
          }
        })
    },
    logout({ commit }) {
      return axios.post('/api/logout')
        .then(() => {
        commit('SET_USER', null)
        })
    }
  },
  mutations: {
    SET_USER: function (state, user) {
      state.authUser = user
    }
  }
};

vue

methods: {
      login () {
        this.$store.dispatch('login', {
          username: this.formUsername,
          password: this.formPassword,
        })
          .then(() => {
            this.formUsername = '';
            this.formPassword = '';
            this.formError = null;
            this.$router.push({ path: '/summary' });
          })
          .catch((e) => {
            this.formError = e.message
          });

      },
      logout () {
        this.$store.dispatch('logout')
      }
    }

Comments

[rurobud]

Это Nuxt? Вы реализовали авторизацию? Можете поделится?

[Илья]

Я в связке с Laravel авторизацию сделал.

Answer 2

[Илья]

Решение нашлось. Пока не подгрузится юзер, не показываем приложение

Answer 3

[Vasyl Kovbassa]

Я не совсем понял вопрос, но думаю, что копать нужно в сторону коллбеков или промисов.

Answer 4

[rurobud]

Для ассинхронных действий надо использовать Actions.