0 
async handleSignInSignOutButtonClick() {
  if (!this.isSignedIn) {
    supabase.auth.signIn({ provider: "google" });
    this.$store.commit("signIn", supabase.auth.session());
    window.location.reload();
    return;
  }

  await this.$store.commit("signOut");
  supabase.auth.signOut();
  window.location.reload();
},

上面的功能是由一个登录按钮触发的，这个按钮应该是一个退出按钮和用户登录后的图标。

当该功能触发时，supabase 会将我重定向到 Google OAuth 同意屏幕。但是，在登录并重定向回我的应用程序后，登录按钮会一直保留在那里，直到我手动刷新页面。

我的代码有什么问题...

4

1 回答 1

0

您需要注意几件事。对于初学者来说，当您不需要该handleSignInSignOutButtonClick()功能时，您正在重新加载页面。

当身份验证过程开始时，您的应用将被重定向到您发现的 Google OAuth 同意屏幕。身份验证完成后，您将被重定向回您的应用程序并自动重新加载。

第二点是你可以利用supabase.auth.onAuthStateChange()事件来帮助你。我的建议是在您创建 supabase 客户端时监听此事件，以便在您的应用程序实例的持续时间内监听。在该事件处理期间，您可以根据状态更改将用户分配到商店（或您想要保存用户数据的任何地方）。您的应用可以对状态更改做出反应。

在您的 supabase 客户端设置代码中：

const supabaseUrl = process.env.SUPABASE_URL // your supabaseUrl
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY // your supabaseKey

const supabase = createClient(supabaseUrl, supabaseAnonKey)

/**
* Set up the authentication state change listener
* 
* @param  {string} event The event indicates what state changed (SIGN_IN, SIGN_OUT etc)
* @param  {object} session The session contains the current user session data or null if there is no user
*/
supabase.auth.onAuthStateChange((event, session) => {
      
  const user = session?.user || null;

  // Save your user to your desired location
  $store.commit("user", user);
});

现在，您可以在用户登录时保存用户数据，并在用户注销时为用户数据设置空值。此外，任何页面刷新都由更改状态事件侦听器或任何其他可能更改用户状态的实例处理。例如，您可以有其他登录或注销按钮，并且单个侦听器会拾取它们。

接下来是处理登录或退出的实际过程。在您的组件 Vue 文件中（来自您的示例）：

async handleSignInSignOutButtonClick() {
      
  if ($store.state.user === null) {
    await supabase.auth.signIn(
      { provider: "google" },
      { redirectTo: "where_to_go_on_login" }))
  } else {
    await supabase.auth.signOut()
    $router.push("your_logged_out_page")
  }
}

最后，对于您的按钮更改状态以指示已登录或已注销，您可以简单地观察商店用户状态。

<button v-if="user">Sign Out</button>
<button v-else>Sign In</button>

这样，只要用户状态发生变化，您的按钮就会更新。每当用户登录或注销时，用户状态都会发生变化，并且您的代码更加紧凑和可读。

一旦最终观察到您可能已经在做任何事情。我建议您将所有身份验证代码放入一个文件中，并公开登录和注销功能，以供您的应用程序用作导出以在组件文件中使用。这样，与登录和注销有关的所有事情都在一个位置处理，并且此代码从组件文件中抽象出来。如果您想从 Supabase 切换，您可以轻松更新一两个文件，而其他一切都将继续工作。

于 2021-12-19T23:59:22.980 回答