My Vue application is utilizing vue-router and vuex. I acquire an authentication token from my API, store it in localStorage, and then push it to the store. However, when the page refreshes, the app is unable to retrieve the token from localStorage and the store remains empty. To handle authorization, I have implemented a guard in my router:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.auth)) {
if (store.getters.logged) {
if (to.meta.scope === store.getters.scope){
next();
return;
}else{
next({name: 'forbidden'});
return;
}
}
next({name: 'login'});
} else {
next();
}
});
Unfortunately, the guard is not functioning correctly due to vue-router loading before vuex, causing the store to be empty and the scope to be undefined. As a result, all requests are redirected to the forbidden route. How can I resolve this issue?