Currently trying to trigger an event from router.beforeEach and listening for it in another component. Although the vue devtool confirms that the event is being triggered, my component seems unable to capture it. Thank you for your help.
This is how I declared my EventBus:
import Vue from 'vue'
export const EventBus = new Vue()
This is how I'm triggering the event:
router.beforeEach((to, from, next) => {
console.log('from', from.name, 'to', to.name)
window.axios.get(checkTokenUrl, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('JWT')}`
}
}).then(res => res.data)
.then(data => {
next()
if (data === true) {
console.log('User is Logged in')
EventBus.$emit('Logged-in')
} else {
console.log('User is Logged out')
EventBus.$emit('Logged-Out')
}
})
})
This is how I'm catching the event:
EventBus.$on('Logged-Out', () => {
this.isUserLoggedIn = false
localStorage.setItem('JWT', '')
})
EventBus.$on('Logged-in', () => {
this.isUserLoggedIn = true
})