SPA : how to avoid login page appearing when refresh page using Vuejs

I follow the below guide as you will see so when I refresh the page while loading Spiner running my current router will be login page and after loading Spiner finished then the dashboard page came back again, how can I solve this problem.
For the first time, I didn't use check the store inside a middleware that means when I refresh a page the system will logout.

route.js

const routes = [
    {
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            middleware: [
                guest
            ]
        }
    },
    {
        path: '/dashboard',
        name: 'dashboard',
        component: () =>
            import ( /* webpackChunkName: "dashboard" */ '@/views/admin/Dashboard.vue'),
        meta: {
            middleware: [
                auth
            ]
        }
    }
}

middleware auth.js

export default function auth ({ next, store }){
    if(!store.getters.auth){
        store.dispatch('isLogin');
    }

    if(!store.getters.auth){
        return next({
            // name: 'login'
            path: '/login',
        });
    }
    
   
    return next()
}

middleware guest.js

export default function guest ({ next, store}){
    if(!store.getters.auth){
        store.dispatch('isLogin');
    }

    if(store.getters.auth){
        return next({
        //    name: 'dashboard'
            path: '/dashboard',
        })
    }

   
    return next()
}

index.js

import routes from "./routes";
const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    base: process.env.BASE_URL,
    routes
});


router.beforeEach((to, from, next) => {
    // console.log("to, from, next", to, from, next, to.meta.middleware);

    if (!to.meta.middleware) {
        return next()
    }
    const middleware = to.meta.middleware
// console.log("middleware", middleware);
    const context = {
        to,
        from,
        next,
        store
    }
    return middleware[0]({
        ...context
    })
});

Vuex actions (like your isLogin action) are asynchronous so your user might not be logged in by the time you're checking store.getters.auth after you've dispatched isLogin.

You could use the "then" syntax for promises to ensure that your action has been completed before checking if the user is logged in:

export default async function auth({ next, store }) {
    if (!store.getters.auth) {
        store.dispatch("isLogin").then(_ => {
            if (!store.getters.auth) {
                return next({
                    path: "/login"
                });
            }

            return next();
        });
    }
}

And then call the middleware using the await keyword:

await middleware[0]({
        ...context
});