Vue router : run beforeEach after fetching data - vue.js

Question

I'm working on a webapp with authentication (cookie based). While the app is loading (fetching global settings and checking if a user is logged in) I want to show a loading state. Otherwise the actual route may be shown.
To check if a user has access to a certain route I'm using vue-router beforeEach function
router.beforeEach((to, _, next) => {
const isLoggedIn = store.getters["auth/isLoggedIn"];
console.log(`Is user logged in?: ${isLoggedIn}`);
const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
const requiresGuest = to.matched.some(
(record) => record.meta.redirectIfLoggedIn
);
if (requiresAuth && !isLoggedIn) {
next("/login");
} else if (requiresGuest && isLoggedIn) {
next("/");
} else {
next();
}
});
export default router;
The fetch requests are being done in the created function of App.vue
<template>
<Loader v-if="isLoading" />
<component v-else :is="this.$route.meta.layout">
<router-view />
</component>
</template>
<script>
import Loader from "#/components/general/Loader.vue";
export default {
data() {
return {
isLoading: true,
};
},
components: {
Loader,
},
async created() {
await this.$store.dispatch("settings/loadSettings");
await this.$store.dispatch("auth/tryLogin");
this.isLoading = false;
},
};
</script>
The problem I'm facing is that the beforeEach function is running before the fetching is done so isLoggedIn is always false. What can I do to make sure the fetch requests are completely finished before going into the beforeEach middleware?
Console log of the actions:
1) Settings before loading: {"logo_url":null,"background_color":"#089dde","text_color":"#ffffff"}
2) loading settings
3) Is user logged in?: false
4) Settings after loading: {"logo_url":null,"background_color":"#089dde","text_color":"#ffffff"}
5) User before loading: null
6) loading user
7) User after loading: {"id":1,"name":"John Doe","email":"johndoe#company.com"}
I've put some code with a fake fetch request in a codesandbox project. https://codesandbox.io/s/elegant-agnesi-399z5

Answer 1

Initial navigation occurs in Vue router before the application is initialized. Since a store is available outside Vue application instance, this can solved by initializing the state prior to application initialization. In this case a loader needs to be moved from Vue application to HTML file, this also allows to show it as soon as possible.
Alternatively, initial navigation can be postponed until the application is fully initialized. App component can interact with router in any way, but there should be a promise that will prevent beforeEach from proceeding further:
export let start;
const startPromise = resolve => { start = resolve };
router.beforeEach(async (to, _, next) => {
await startPromise;
...
and
await this.$store.dispatch("settings/loadSettings");
await this.$store.dispatch("auth/tryLogin");
start();