时间戳

首页 > 解决方案 > Vue 实例中基于身份验证检查的动态渲染函数

vue.js - Vue 实例中基于身份验证检查的动态渲染函数

问题描述

我正在向我的 Vue 应用程序添加 JWT 身份验证，并且我的 Login.vue 和 App.vue 是分开的，这意味着我不想在用户未登录时呈现 App.vue。

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

这有效，但因为

this.$auth.check()

加载需要一秒钟，您会看到登录应用程序正在呈现一秒钟，然后切换到应用程序。我怎样才能解决这个问题？我想我应该使用 await 但我无法让它正常工作。

标签： vue.jsauthenticationasynchronousasync-awaitaxios

解决方案

我怎样才能解决这个问题？我想我应该使用 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')

推荐阅读