vue.js - 如何让 Vue Router Guards 等待 Vuex？

Question

因此，我在这个问题上公开找到的所有答案都不是很有帮助，虽然它们“有效”，但它们非常骇人听闻。

基本上我有一个 vuex 变量，appLoading，它最初是 true 但一旦所有异步操作完成就会设置为 false。我还有另一个名为 user 的 vuex 变量，它包含一旦返回就从异步操作中分派(dispatch)的用户信息。

然后我还有一个路由器守卫来检查；

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.requiresAuth)) {
    if (store.getters.getUser) {
      return next();
    }
    return router.push({ name: 'index.signup' });
  }

  return next();
});

然后在我的初始 Vue 实例中显示加载状态，直到 appLoading = false;

现在这个“工作”但是有一个问题真的很困扰我。如果您加载该页面，您将看到您应该看到的相反页面的“闪烁”。

因此，如果您已登录，在首次加载时您会看到注册页面闪烁。如果您未登录，您将看到登录页面闪烁。

这很烦人，我将问题缩小到我的 auth guard。似乎它正在将注册页面推送到路由器，因为 user 不存在然后立即推送到登录页面，因为 user 被提交。

我怎样才能以一种不老套的方式解决这个问题，因为它有点烦人，而且令人沮丧的是 Vue 甚至没有一点官方文档/示例来解决像这样常见的问题，尤其是因为有如此大量的网络应用程序使用身份验证。

希望有人能提供一些帮助。 :)

Answer 1

根据评论中的讨论:

如果您将 appLoading 变量设置为 promise，那么对您来说最好的方法就是。这就是您可以做事或等待事情直到解决您的应用数据的方式。

考虑到 appLoading 您使用 api 调用 promise 初始化的 promise ，您的路由器 Hook 将像:

router.beforeEach((to, from, next) => {
  appLoading.then(() => {
    if (to.matched.some(route => route.meta.requiresAuth)) {
      if (store.getters.getUser) {
        return next();
      }
      return router.push({ name: "index.signup" });
    }

    return next();
  });
});

您可能只想将它作为 init 代码的导出，而不是将其保存在 Vuex 中。 Vuex 适用于在组件之间共享的响应式(Reactive)数据。