Here is the routing code snippet:
// exporting for component use
export var router = new VueRouter();
// defining routes
router.map({
'home': {
component: Home,
auth: true
},
'login': {
component: Login,
auth: false
}
});
// redirecting to fallback route
router.redirect({
'*': 'home'
});
router.beforeEach(function (transition) {
console.log("here!");
console.log("beforeeach auth.user.authenticated: "+auth.user.authenticated)
if (transition.to.auth && !auth.user.authenticated) {
// redirection for authentication check
transition.redirect('login');
} else {
transition.next();
}
});
// starting the app at element with id 'app'
router.start(App, '#app');
Now examining the auth/index.js
export default {
user: {
authenticated: false
},
login: function(context, creds, redirect) {
this.user.authenticated=true;
console.log("logged in!");
router.go('/home');
},
logout: function() {
this.user.authenticated=false;
console.log("logout");
router.go('/login');
}
}
A snippet of my Nav.vue file:
<template>
<div class="top-nav-bar" v-if="user.authenticated">
// other code here....
<ul class="notification user-drop-down">
<li><a href="#" @click="logout()">Logout</a></li>
</ul>
// other code here ...
</div>
</template>
<script>
import auth from '../services/auth';
export default {
data: function () {
return {
user: auth.user
}
},
methods: {
logout: function () {
auth.logout();
}
}
}
</script>
Upon clicking the logout button, it redirects to localhost:8080/#!/home
However, the auth.logout() function contains router.go('/login'), which should redirect to the login Controller!
If I manually enter localhost:8080/!#/home in the browser, it correctly redirects to the /login page. So why does the logout button remain at /home without any errors displayed?
UPDATE:
The versions being used are vue 1.0.7 and vue-router 0.7.5