Nuxt fetchUser Auth 函数不是反应式的，需要硬刷新

Question

使用 Nuxt 2.15.3，后端为 Rails。

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

注意： 这个 google 身份验证流程与我的普通应用程序 sign-in/sign-up 流程是分开的。我只使用了一些 Google APIs，所以这与通过 Google OAuth 创建用户帐户无关，我只是请求访问一些 API s 在用户的 Google 帐户中，即我的业务 API.

现在，我的后端在用户 table 上有一个布尔值 google_authenticated 字段，如果 access/refresh 令牌存在，它会被设置为 true，它会自动发送到 Nuxt 作为 $auth.user.google_authenticated。此功能工作正常，但我的问题是用户重定向到的页面有一个 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显示另一个 div.

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

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

Answer 1

原来这是一个竞争条件（有点）。

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

所以基本上，当 Nuxt 再次调用 fetchUser() 时，它实际上让用户没有 googleAuthorized 标志设置为真，因为那只是发生得有点太慢了。不过，当你只看开发工具时，这并不是什么值得注意的事情，因为一切似乎或多或少都是瞬间发生的，但时间非常接近，这就是为什么它有时工作，而其他时候如果不刷新就不会。

Nuxt fetchUser Auth 函数不是反应式的，需要硬刷新

Nuxt fetchUser Auth function isn't reactive and requires a hard refresh

vue.js

vuejs2

nuxt.js

nuxt-auth