1

使用带有 Rails 后端的 Nuxt 2.15.3。

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

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

现在，我的后端在 User 表上有一个布尔google_authenticated字段，如果访问/刷新令牌存在，则该字段设置为 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();
      });
  }
}

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

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

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

4

1 回答 1

1

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

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

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

于 2021-11-09T17:20:40.927 回答