AuthWall.vue

<template>
  <div v-if="$store.state.auth.user.steeringUser" class="tw-w-full">
    <slot />
  </div>

  <div v-else class="tw-w-full tw-text-center">
    {{ $t('loading') }}
  </div>
</template>

<script>
export default {
  created() {
    const user = this.$store.state.auth.user.steeringUser

    // We might not have a user at load-time.
    // In this case wait until the store gives us one.
    if (user === null) {
      this.$store.watch(
        (state) => state.auth.user.steeringUser,
        (user) => this.redirectToHome(user),
      )

      return
    }

    this.redirectToHome(user)
  },

  methods: {
    redirectToHome(user) {
      if (!user.is_superuser) {
        this.$toast.error(this.$t('auth.permissionError'))
        this.$router.push({ name: 'home' })
      }
    },
  },
}
</script>