Как заставить перестать моргать форму авторизации?

Question

[Владимир Бандуристов]

Создаю простейшее Vue.js приложение. Имеется компонент примерно такого содержания

<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>

Всё работает нормально и гладко, но проблема заключается в том, что при перезагрузке страницы, на долю секунды всё таки появляется форма авторизации, вопрос - как от этого избавиться?

Answer 1

[0xD34F]

Добавьте третье состояние, оно же дефолтное - неопределённость, непонятно, авторизован пользователь, или нет:

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

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

Comments

[Владимир Бандуристов]

Спасибо!

Answer 2

[lavezzi1]

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

Comments

[Владимир Бандуристов]

v-cloak пробовал, не помогло.