How to make the authorization form stop blinking?

Question

Vue.js

I am creating a simple Vue.js application. There is a component like this

<div id="app">
  <template v-if="auth === true">
    ТУТ ОСНОВНОЙ КОНТЕНТ
  </template>
  <template v-else>
    ФОРМА АВТОРИЗАЦИИ
  </template>
</div>

<script>
  ...
  data: function () {
      return {
          auth: false
      }
  },
  created() {
        this.checkUser();
    },
    methods: {
    	checkUser: function () {
    		...
    		Тут проверка пользователя на авторизацию и в случае успеха:
    		this.auth = true;
    		...
    	}
    }
    ...
</script>

Everything works fine and smoothly, but the problem is that when the page is reloaded, an authorization form still appears for a split second, the question is how to get rid of this?

Answer 1

Add a third state, it is also default - uncertainty, it is not clear whether the user is authorized or not:

data: () => ({
  auth: null,
}),
methods: {
  checkUser() {
    ...
    // указываем false только в случае отрицательного результата проверки
    this.auth = false;
    ...
  },
},

<template v-else-if="auth === false">
  ФОРМА АВТОРИЗАЦИИ
</template>

Answer 2

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