I am facing an issue with accessing the 'Vue' in a beforeEnter function.
Whenever a session expires, a small toast message appears prompting the user to log in again.
The toast message contains a button that, when clicked, should trigger another modal allowing the user to log in. This modal is a separate component within 'Vue'.
How can I access the 'Vue' ('this') to trigger the modal?
I have tried using this.app and this.a.app, along with other suggestions from sources like StackOverflow, but none of them have worked.
Thank you.
Route
{
path: "/dashboard",
name: "dashboard",
component: Dashboard,
beforeEnter: protectedPage,
meta: {
title: "Dashboard"
}
},
Function
function protectedPage(to, from, next) {
if (VueJwtDecode.decode(localStorage.token).exp < Math.floor(Date.now() / 1000)) {
localStorage.removeItem("token");
Vue.toasted.show("The session has ended. Please login.", {
theme: "toasted-primary",
position: "top-center",
duration: null,
action: {
text: "Login",
onClick: (e, toastObject) => {
// CODE HERE TO TRIGGER LOGIN MODAL
next("/");
toastObject.goAway(0);
}
}
});
Vue.toasted.hide();
next("/");
}
}