I am delving into the world of Vue JS for the first time, and I have a navigation bar that displays two buttons - 'Login' and 'Sign Up', with a third button 'Logout' hidden until the user is logged in.
To handle the visibility of these buttons, I used
<template v-if="authenticated"><template v-else> to display the login and registration forms as Bootstrap 4 modals.
The authentication status is controlled through the variable authenticated using the following methods:
data: function() {
return {
authenticated: false
}
},
methods: {
logout: function() {
this.$session.destroy()
}
},
created() {
this.authenticated = this.$session.exists()
},
The navigation bar is housed in a separate component, while the login and registration forms each reside within their own modal.
<template v-if="authenticated">
<li class="nav-item">
<a href="#" v-on:click="logout" class="nav-link">Logout</a>
</li>
</template>
<template v-else>
<li class="nav-item">
<a class="nav-link" data-target="#signup" data-toggle="modal" href="#signup">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#login" data-toggle="modal" href="#login">Login</a>
</li>
</template>
However, despite logging my authenticated state, there seems to be an issue with its update.