Vue,js, используемый с Supabase - не удается обновить кнопку входа в систему после входа в систему с помощью Oauth

Question

      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. Однако после входа в систему и перенаправления обратно в мое приложение кнопка входа остается там, пока я не обновлю страницу вручную.

Что не так с моим кодом ...

Answer 1

Есть несколько вещей, о которых вам нужно знать. Для начала вы перезагружаете свою страницу, когда вам это не нужно в функция.

Когда начнется процесс аутентификации, ваше приложение будет перенаправлено на экран согласия Google OAuth, как вы обнаружили. После завершения аутентификации вы будете перенаправлены обратно в свое приложение, и перезагрузка произойдет автоматически.

Второй момент заключается в том, что вы можете использовать мероприятие вам в помощь. Мое предложение состояло бы в том, чтобы прослушивать это событие, когда вы создаете клиент superbase, чтобы он прослушивал все время существования вашего экземпляра приложения. Во время обработки этого события вы можете назначить пользователя хранилищу (или любому месту, где вы хотите сохранить пользовательские данные) на основе изменения состояния. Ваше приложение может реагировать на изменения состояния.

В вашем коде настройки клиента superbase:

      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, вы можете легко обновить один или два файла, а все остальное просто продолжит работать.