Attempting to implement a reactive navigation system that changes based on user authentication status. Following a login action in the application, a token is stored in local storage. If this token exists, I aim to display a logout button. Despite trying various approaches such as computed properties, standard methods, and props, the desired reactivity is not achieved.
After logging in, the navigation does not update dynamically. However, upon refreshing the page or resetting the app, the logout button appears as expected.
What could be causing this issue?
Diving into Vue JS has been a challenge for me, with hours spent struggling to understand the concepts. Tasks that were straightforward server-side are taking much longer client-side. Where is the promised reactivity?
Nav.vue
<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
<router-link to="/">Home</router-link>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<router-link to="/about" class="nav-link">About</router-link>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item" v-if="hasAuth()"><a @click="logout()" class="nav-link">Log Out</a></li>
<template v-else>
<li class="nav-item">
<router-link to="/register" class="nav-link">Register</router-link>
</li>
<li class="nav-item">
<router-link to="/login" class="nav-link">Login</router-link>
</li>
</template>
</ul>
</div>
</nav>
</template>
<script>
export default {
name: 'Nav',
data: () => {
return {
auth: false
}
},
methods: {
logout: function () {
localStorage.removeItem('user-token');
this.$router.push({ path: 'login' });
},
hasAuth: function () {
this.auth = (localStorage.getItem('user-token')) ? true : false;
return this.auth
}
},
};
</script>
App.vue
<template>
<div id="app">
<Nav></Nav>
<router-view/>
</div>
</template>
<script>
import Nav from '@/components/Nav.vue';
export default {
components: {
Nav,
},
}
</script>