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

by

0đź‘Ť

âś…

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
});

Leave a comment