Убедитесь, что переменная существует в хранилище, используя vuex

Question

Я ограничиваю загрузку приложения в DOM, только если у меня есть данные пользователя:

<template>
  <div id="app">
    <template v-if="loggedUser">
    //...
    </template>
  </div>
</template>

, где loggedUser - это вычисляемое свойство из магазина:

 computed: {
    loggedUser() {
      return this.$store.getters.user;
    }
  }

Проблема в том, что другие компоненты полагаются на это свойство.В одном компоненте, называемом admin по маршруту /admin, например, когда mounted() я передаю объект пользователя из хранилища методу, который в свою очередь выполняет HTTP-запрос:

mounted(){
   this.someFunc(this.$store.getters.user)
}

, но проблемаИногда пользователь существует, а иногда нет.Это верно, если пользователь пытается загрузить приложение непосредственно со страницы администратора, а пользователь не существует.Одним из возможных вариантов решения этой проблемы является использование watch над вычисляемым свойством, которое возвращает пользователя из хранилища:

computed: {
    user() {
        return this.$store.getters.user;
       }
    },
watch: {
    user(newVal) {
        if(newVal) this.someFunc(this.$store.getters.user)
      }
    }

, и хотя это может работать, это утомительно даже для этого примера.Тем не менее, из-за этой проблемы возникают более сложные вопросы.Другой возможный вариант - попытаться сохранить пользователя в localStorage, но я думаю, что vuex сможет решить мою проблему без использования каких-либо решений для хранения на стороне клиента.Любая идея, как я могу решить эту проблему?Есть ли более надежный способ обеспечить доступ пользователя ко всему моему приложению?

Answer 1

Если вы используете маршрутизатор vue, вы можете аутентифицировать пользователя там:

       const ifAuthenticated = (to, from, next) => {
      if (store.state.token) {  // or state.user etc.
        next()
        return
      }
next('/Adminlogin')  // if not authenticated

и путь к маршрутизатору выглядит следующим образом:

  {
  path: '/AdminUI',
  name: 'AdminUI',
  component: AdminUI,
  beforeEnter: ifAuthenticated

}

Другое возможное решение:

<v-template
    v-show="$store.state.isUserLoggedIn"
</v-template>

не забудьте import { mapState } from "vuex";

и в store:

 getters: {
    isUserLoggedIn: state => !!state.token
  }