Пытаюсь сделать авторизацию в Nuxt.js. Имеется шапка с обычной менюшкой. Если пользователь авторизован, то вывожу его логин, если нет, то вывожу кнопку входа.
При нажатии на кнопку "вход" - открывается модальное окно с формой. Там ввожу логин и пароль, все нормально авторизовывается, но не меняется меню в шапке. Если перезагрузить страницу, то шапка изменяется. Неужели нужно вручную отслеживать это состояние и менять его, или я что-то делаю не так?
Условный код:
<template>
<div>
<div v-if="$auth.loggedIn">
Вы вошли как {{$auth.user.name}}
</div>
<div v-else>
<button v-b-modal>Вход</button>
</div>
</div>
</template>
<script>
export default {
methods: {
async userLogin(login, password) {
try {
const response = await this.$auth.loginWith('local', { data: { login, password } })
const user = response.data.user
this.$auth.setUser(user)
console.log(this.$auth.loggedIn) //тут будет true
} catch (err) {
console.log(err)
}
},
}
}
</script>
Простой
