Currently, I am expanding my skills with VueJS by working on a user login system.
My main goal is to prevent a logged-in user from accessing the login or register pages and instead redirect them to the dashboard page.
To achieve this, I am utilizing store.js to manage user data.
In my code snippet within router.js, I made an attempt to implement this logic:
path: '/signin',
component: SigninPage,
beforeRouteEnter(to, from, next) {
console.log(store.state.userId)
if (store.state.userId) {
next('/dashboard')
} else {
next()
}
}
}
Despite importing store.js, I encountered an issue where the store.state.userId always returns null when accessed in the router even though it correctly displays the userId in my views when the user is authenticated.
Upon further investigation, I confirmed that the store.state holds the necessary data when logging it in the router.js.
Screenshot of the store state object in the console log
However, I am puzzled as to why the userId key remains unresolved and shows up as null. This discrepancy has left me confused and seeking clarification on the blocking issue.
If anyone can shed some light on where I might be going wrong with my implementation, it would be greatly appreciated as I seem unable to grasp the root cause despite various attempts.