Vue.js SPA：如何避免使用Vuejs刷新页面时出现登录页面

我按照下面的指南进行操作，正如您将看到的那样，当我在加载Spiner时刷新页面，运行我当前路由器的将是登录页面，在加载Spiner完成后，仪表板页面再次出现，我如何解决此问题。 这是第一次，我没有在中间件中使用check-the-store，这意味着当我刷新页面时，系统将注销

route.js

const路由=[
{
路径：'/login'，
名称：'登录'，
组件：登录，
元：{
中间件：[
客人
]
}
},
{
路径：'/dashboard'，
名称：“仪表板”，
组件：（）=>
导入（/*webpackChunkName:“dashboard”*/'@/views/admin/dashboard.vue”），
元：{
中间件：[
认证
]
}
}
}

中间件auth.js

导出默认函数auth（{next，store}）{
if（！store.getters.auth）{
存储调度（“isLogin”）；
}
if（！store.getters.auth）{
下一个返回({
//名称：“登录”
路径：'/login'，
});
}
返回下一个（）
}

中间件guest.js

导出默认函数guest（{next，store}）{
if（！store.getters.auth）{
存储调度（“isLogin”）；
}
if（store.getters.auth）{
下一个返回({
//名称：“仪表板”
路径：'/dashboard'，
})
}
返回下一个（）
}

index.js

从“/routes”导入路由；
常量路由器=新的VueRouter({
模式：“历史”，
linkActiveClass:'活动'，
base:process.env.base\u URL，
路线
});
路由器.beforeach（（到、从、下一个）=>{
//log（“to，from，next”，to，from，next，to.meta.middleware）；
if（！to.meta.middleware）{
返回下一个（）
}
const middleware=to.meta.middleware
//log（“中间件”，中间件）；
常量上下文={
到
从…起
下一个
商店
}
返回中间件[0]({
上下文
})
});

Vuex操作（如您的

isLogin

操作）是异步的，因此在调度

isLogin

后，在您检查

store.getters.auth

时，您的用户可能尚未登录

您可以使用“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();
        });
    }
}

然后使用

wait

关键字调用中间件：

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