I'm currently working on a Vue.js application and I am in the process of creating a login system that involves multiple components.
Within my App.vue component, which serves as the main component with the navigation bar, there is a button that looks like this:
<a class="nav-item" v-link="'login'" v-if="!user.authenticated">Login</a>
...
import auth from '../auth'
export default {
data(){
return{
user = auth.user
}
}
}
In another file (/auth/index.js), I define the "auth" methods in the following manner:
...
user: {
authenticated: false
},
login(email, password) {
axios.post(LOGIN_URL, {
email,
password
}).then((response) => {
this.user.authenticated = true;
this.user = response.data;
router.go('/home');
})
.catch((error)=>{
console.log(error);
});
}
Additionally, I have created another component called Login.vue that handles the login template view and invokes the "auth.login" method with the necessary parameters.
My goal is to update the user value in App.vue with the information from auth.user after the user successfully logs in. What would be the best approach for achieving this? Should I prioritize managing v-on:click and v-link or create a new method?
EDIT:
I've been attempting to use the beforeRouteEnter method but so far, I haven't found success.