Как подождать пока подгрузятся данные для авторизации vuejs?

Question

[wlms]

На роуты у меня настроен метод beforeEnter. Он смотрит есть ли user в vuex state. Если нет, то перекидывает на auth. При загрузке приложения state пустой и он сразу перекидывает на auth, а user подгружается через секунду. Иными словами user не успевает выгрузиться в state и поэтому происходит редирект. Вопрос: как дождаться данных, и после перекидывать на auth?

Answer 1

[Дима Паутов]

Нужно не beforeEnter, а beforeEach, в котором проверять пользователя
А перед стартом приложения в корневом инстансе vue в хуке created запросить пользователя

//App.vue

async created () {
await this.getUser()
}

Тогда при инициализации приложения сначала запросятся нужные данные

Comments

[wlms]

Делаю так

created () {
    this.$store.dispatch('getAuthUser')
  }

Он запрашивает дату. Она возвращается. Как сделать редирект, если дата пуста?

[Дима Паутов]

this.$store.dispatch('getAuthUser')
.then(() => {
if (!this.$store.state.user.data) {
this.router.go('/sign-in')
}
})

[wlms]

Дима Турков, После первого входа действительно редиректит. Только вот потом, я могу путешествовать по всем руотам. По идее это должен запрещать beforeEach , на сколько я понимаю?

[Дима Паутов]

wlms, если внутри него вы делаете проверку.

router.beforeEach((to, from, next) => {
  if (this.$store.state.user.data) {
next()
} else {
router.redirect('/sign-in')
}
})