Dynamic render function in Vue instance based on Authentication

Hi,

I'm adding JWT authentication to my Vue app and I have my Login.vue and App.vue seperated which means that I don't want to render the App.vue when the user is not logged in.

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

This works but since

this.$auth.check()

Takes a second to load you see the Login app being rendered for a second and then it switches to the App. How can I fix this? I think I should use await but I can't get it to work properly.

Spamhead2k

6 years ago

Level 6

Try using the v-cloak directive

<app v-cloak></app>

and in your css

[v-cloak] {
  display: none;
}

official Docs:

https://vuejs.org/v2/api/#v-cloak

//Edit: sorry, was a bit fast and didn't see, that you are in the render context, so I don't know if my approach works

Please or to participate in this conversation.