Функция визуализации Dynami c в экземпляре Vue на основе проверки подлинности

Question

Я добавляю аутентификацию JWT в мое приложение Vue, и у меня есть логин. vue и приложение. vue отдельно, что означает, что я не хочу отображать приложение. vue, когда пользователь не вошел в систему.

new Vue({
    router,
    render: function (app) {
        if (this.$auth.check()) {
            return app(App);
        } else {
            return app(Login);
        }
    }
}).$mount('#app')

Это работает, но так как

this.$auth.check()

Загрузка занимает секунду, вы видите приложение входа в систему, отображаемое в течение секунды, а затем оно переключается в приложение. Как я могу это исправить? Я думаю, что должен использовать await, но не могу заставить его работать должным образом.

Answer 1

Как я могу это исправить? Я думаю, что я должен использовать await, но я не могу заставить его работать должным образом.

Это зависит от того, что this.$auth.check() возврат. Если он возвращает обещание, ответ - да, вы должны использовать await.

Но, к сожалению, функция render должна быть синхронной. Что вы можете сделать, это использовать еще один компонент-оболочку .

new Vue({
  render(createElement) {
    return createElement({
      data: () => ({
        component: null
      }),
      async created() {
        this.component = await checkAuth() ? App : Login
      },
      render(createElement) {
        return createElement(this.component)
      }
    })
  }
}).$mount('#app')

Демо

Примечание:

• Я бы предпочел создать компонент-оболочку в качестве однофайлового компонента.

• Похоже, вы используете vue-router, возможно, вы захотите использовать Navigation Guards вместо этого.

Обновление

Как вы уже могли заметить, вам вообще не нужен компонент-обертка.

new Vue({
  data: () => ({
    component: null
  }),
  async created() {
    this.component = await checkAuth() ? App : Login
  },
  render(createElement) {
    return createElement(this.component)
  }
}).$mount('#app')