Функция BeforeRouteEnter в App.vue

Question

У меня проблема с кодом Vuejs!

У меня есть приложение Vuejs, в котором я установил Vue-router и Vuex! Я настроил свой маршрутизатор и в моем магазине есть действия, которые позволяют мне извлекать данные из моего PHP API.

Проблема в том, что мне нужно что-то делать ( проверить, существует ли токен Xhr в localStorage, выполнить запрос xhr с помощью метода отправки хранилища для загрузки данных, связанных с пользователем, иначе ничего не делать ) только если пользователь перезагружает страницу, в противном случае, если пользователь переходит со страницы на страницу в системе Vue-router, запрос отправлять не нужно.

Для этого я подумал использовать VueRouter BeforeRouteEnter в моем компоненте App.Vue. Но проблема в том, что он не работает в App.Vue (я не понял почему), но работает в других компонентах, связанных с маршрутами.

Затем я попытался использовать хук vuejs созданный () ! Это позволяет делать запросы xhr, но поскольку эти запросы асинхронны, страница загружается, а данные еще не поступили, что приводит к ошибкам.

My App.Vue

<template>
  <div id="app" class="uk-offcanvas-content">
    <div v-if="!loading">
      <activation-alert v-if="authCheck && !activated && !arr.includes($route.name)"/>
      <navbar v-if="!isMobile"/>
      <mobile-navbar v-if="isMobile"/>
      <vue-progress-bar> </vue-progress-bar>
      <router-view />
      <off-canvas v-if="!isMobile"/>
    </div>
    <div v-else>
      <overlay-loader/>
    </div>
  </div>
</template>

<script>
import store from './store/index'
import Navbar from '@/components/Utils/Navbar/Navbar'
import MobileNavbar from './components/Mobile/Navbar'
import OffCanvas from '@/components/Utils/Navbar/OffCanvas'
import ActivationAlert from '@/components/Auth/Activation-Alert'
import OverlayLoader from '@/components/Utils/OverlayLoader'
import {mapGetters} from 'vuex'
import DeviceInformation from './Classes/DeviceInformation'

let app = {
  name: 'App',
  store,
  data () {
    return {
      arr: ['login', 'register', 'forgot-password',
        'change-password', 'blocked', 'activation'],
      loading: false
    }
  },
  components: {
    Navbar,
    OffCanvas,
    ActivationAlert,
    OverlayLoader,
    MobileNavbar
  },
  computed: {
    ...mapGetters(['activated', 'authCheck', 'isMobile'])
  },
  beforeRouteEnter (to, from, next) {
    console.log(to, from, next) // no output
  },
  mounted () {
    (new DeviceInformation(this)).load()
    this.$Progress.finish()
    global.vm = this
  },
  created () {
    let token = window.localStorage.getItem('xhrToken')
    if (typeof token !== 'undefined' && token !== null) {
      store.dispatch('setUserIfAuthenticated')
        .then(() => { this.loading = false })
    } else {
      store.dispatch('notAuth')
        .then(() => { this.loading = false })
    }

    this.$Progress.start()
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        this.$Progress.parseMeta(meta)
      }
      this.$Progress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$Progress.finish()
    })
  }
}
export default app
</script>

<style scoped>
  @import "../node_modules/semantic-ui-dimmer/dimmer.css";
</style>

** Мой роутер **

import Vue from 'vue'
import Router from 'vue-router'
import Register from '../components/Auth/Register'
import Login from '../components/Auth/Login'
import Home from '../components/Home/Home'
import Test from '../components/Test'
import Blocked from '../components/Auth/Blocked'
import Profile from '../components/Auth/Profile/Profile'
import Activation from '../components/Auth/Activation'
import ForgotPassword from '../components/Auth/ChangePassword/ForgotPassword'
import ChangePassword from '../components/Auth/ChangePassword/ChangePassword'
import JustRegisteredSteps from '../components/Auth/JustRegisteredSteps'
import {auth, guest} from '../services/middleware'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  saveScrollPosition: true,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    },
    {
      path: '/register',
      name: 'register',
      component: Register,
      beforeEnter: guest
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      beforeEnter: guest
    },
    {
      path: '/blocked',
      name: 'blocked',
      component: Blocked,
      beforeEnter: guest
    },
    {
      path: '/forgot-password',
      name: 'forgot-password',
      component: ForgotPassword,
      beforeEnter: guest
    },
    {
      path: '/password/reset/:token',
      name: 'change-password',
      component: ChangePassword,
      beforeEnter: guest
    },
    {
      path: '/profile/:page?',
      name: 'profile',
      component: Profile,
      beforeEnter: auth
    },
    {
      path: '/activation/:action',
      name: 'activation',
      component: Activation,
      beforeEnter: auth
    },
    {
      path: '/set-profile',
      name: 'just-registered-steps',
      component: JustRegisteredSteps,
      beforeEnter: auth
    }
  ]
})

router.options.routes.forEach(function (el) {
  el['meta'] = {
    progress: {
      func: [
        {call: 'color', modifier: 'temp', argument: '#ffb000'},
        {call: 'fail', modifier: 'temp', argument: '#6e0000'},
        {call: 'location', modifier: 'temp', argument: 'top'},
        {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
      ]
    }
  }
})
export default router

Answer 1

почему вы не делаете async created(), чтобы ничего не загружалось до тех пор, пока данные не будут полностью извлечены?