Currently, I am working on my Bachelor's degree project and have encountered a specific issue. While the login, register, and logout functions all seem to be working well, there is an inconsistency with the navigation bar not automatically switching between the login/register options and the logout option.
<template>
<header>
<nav>
<div class="container">
<router-link to="/" class="routerLink"><h1>Proiect Licenta</h1></router-link>
<div class="menu">
<router-link to="/buy">Buy Crypto</router-link>
<router-link to="/market">Market</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
<router-link v-if="!checkLogged" to="/signup">Signup</router-link>
<router-link v-if="!checkLogged" to="/login">Login</router-link>
<base-button mode="flat" v-if="checkLogged" @click="logout">Logout</base-button>
</div>
</div>
</nav>
</header>
</template>
<script>
import User from '../../helpers/User.js';
export default {
data() {
return {
}
},
methods: {
logout() {
User.logOut()
Toast.fire({
icon: 'success',
title: 'Logout successfully'
});
this.$router.push({ name: 'homePage' });
},
},
computed: {
checkLogged() {
if(User.loggedIn()) {
return true;
}
return false;
},
},
}
</script>
User.js:
hasToken() {
const storeToken = localStorage.getItem('token');
if(storeToken) {
return true;
}
return false;
}
loggedIn() {
return this.hasToken();
}
logOut() {
localStorage.removeItem('token');
localStorage.removeItem('user');
}
The navigation bar is integrated into the app.vue component, leading me to believe that it remains static unless the page is refreshed. How can I achieve an immediate switch between the login/register links and the logout option after successful login and redirection to the main page? Any additional details needed will be provided promptly. Thank you.