SPA: как избежать появления страницы входа при обновлении sh страницы с использованием Vuejs

Question

Я следую приведенному ниже руководству, как вы увидите, поэтому, когда я обновлю sh страницу при загрузке Spiner, на которой мой текущий маршрутизатор будет являться страницей входа, а после завершения загрузки Spiner страница панели мониторинга снова вернется, как я могу решить эту проблему? проблема. Впервые я не использовал проверку магазина внутри промежуточного программного обеспечения, что означает, что при обновлении sh страницы система выйдет из системы.

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
            ]
        }
    }
}

аутентификация промежуточного программного обеспечения. 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()
}

гость промежуточного программного обеспечения. 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
    })
});

Answer 1

Действия Vuex (например, ваше действие isLogin) являются асинхронными, поэтому ваш пользователь может не войти в систему во время проверки store.getters.auth после отправки isLogin.

Вы можете используйте синтаксис «then» для обещаний, чтобы убедиться, что ваше действие было выполнено, прежде чем проверять, вошел ли пользователь в систему:

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

, а затем вызвать промежуточное ПО, используя ключевое слово await:

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