Nuxt fetchUser Auth 功能不是反应性的，需要硬刷新答案

【问题标题】：Nuxt fetchUser Auth function isn't reactive and requires a hard refreshNuxt fetchUser Auth 功能不是反应性的，需要硬刷新
【发布时间】：2021-12-21 10:07:08
【问题描述】：

使用 Nuxt 2.15.3，带有 Rails 后端。

我正在尝试在我的应用中创建 Google OAuth 工作流程，但在获取访问代码后，我在执行这些步骤时遇到了一些问题。一旦用户通过 Google 进行身份验证并使用 URL 参数中的访问代码被重定向回来，我就会向我自己的后端发送一个请求，以将访问/刷新令牌保存在 User 模型中。

注意：此 google 身份验证流程与我的正常应用登录/注册流程是分开的。我只使用了一些 Google API，所以这与通过 Google OAuth 创建用户帐户无关，我只是请求访问用户 Google 帐户中的一些 API，即 My Business API。

现在，我的后端在 User 表上有一个布尔值 google_authenticated 字段，如果存在访问/刷新令牌，则该字段设置为 true，它会自动作为 $auth.user.google_authenticated 发送到 Nuxt。这个功能很好用，但我的问题是用户被重定向到的页面有一个v-if 来检查这个google_authenticated 标志。

模板看起来像这样，显然是为了问题而简化的

<template>
  <div v-if="googleAuthenticated">...</div>
  <div v-else><a href="googleapis.com">Authenticate</button></div>
</template>

export default {
  data() {
    return {
      googleAuthenticated: this.$auth.user.googleAuthorized,
    };
  },
  async mounted() {
    const accessCode = this.$route.query.code;

    await this.$axios
      .post("/users/google_oauth", {
        access_code: accessCode,
      })
      .then((response) => {
        this.$auth.fetchUser();
      });
  }
}

如您所见，当用户使用 URL 参数中的代码访问页面时，我正在尝试在挂载时自动刷新 $auth.user.googleAuthorized。问题是$auth.user 似乎没有反应，用户需要导航到另一个页面或刷新当前页面以显示这些更改并让v-if 触发并显示另一个分区。

我可以从开发控制台看到 fetchUser() 方法确实被调用了，我可以从 Vuex 商店看到 auth/SET 函数已被调用并且 $auth.user.googleAuthorized 标志设置为 true 为好吧。

根据 Nuxt Docs，$auth 模块是被动的，但我没有看到它。我可以在这里做些什么来使这些更改正确生效？

【问题讨论】：

标签： vue.js vuejs2 nuxt.js nuxt-auth

【解决方案1】：

所以事实证明这是一个竞争条件（排序）。

发生的情况是，一旦我告诉自己的 API 从 Google 获取访问令牌，该请求显然需要一些非零时间。因此，Vue 正在等待从我自己的 API 中获取 200，这表明我已经获取了访问令牌并且可以继续使用 Google API。

所以基本上，当 Nuxt 再次调用 fetchUser() 时，它实际上是让用户没有将 googleAuthorized 标志设置为 true，因为这只是发生得太慢了一点点。但是，当您仅查看开发工具时，这并不是很明显，因为一切似乎或多或少都是瞬间发生的，但是时间非常接近，这就是它有时起作用的原因，而其他时候它不会没有刷新。

【讨论】：