AppRequireAuth.tsx

import Vue, { CreateElement, VNode } from 'vue'
import * as tsx from 'vue-tsx-support'

export const AppRequireAuth = tsx.component({
  name: 'AppRequireAuth',
  watch: {
    async isInitializedAuth() {
      const user = this.$auth.currentUser
      if (user) {
        try {
          await this.$store.dispatch('fetchUserData', { user })
        } catch (e) {}
      }
    },
    isFetchedUserData(next: boolean) {
      if (this.isFetchedUserData) {
        if (this.$store.getters['userData'].createdAt) {
          if (this.$route.path === '/') {
            this.$router.push('/user/edit')
          }
        }
      } else {
        this.$router.push('/')
      }
    }
  },
  computed: {
    isFetchedUserData() {
      return !!this.$store.getters['userData']
    },
    isInitializedAuth() {
      return this.$auth.currentUser !== undefined
    }
  },
  render(h: CreateElement): VNode {
    if (!this.isInitializedAuth || !this.$auth.currentUser) {
      return this.$slots.fallback as any
    }

    if (!this.isFetchedUserData) {
      return this.$slots.fallback as any
    }

    return this.$slots.completed as any
  }
})