新版Google登录按钮刷新页面后消失问题求助

问题根源 #

Google登录的GSI脚本默认在页面首次加载时自动扫描DOM里的g_id_onload和g_id_signin元素并初始化按钮，但Svelte在页面刷新（包括硬刷新、开发环境热重载）时，DOM会重新构建，此时GSI脚本的自动扫描已经完成，导致新渲染的g_id_signin元素无法被识别并渲染成按钮。

方案一：手动注入脚本并初始化按钮 #

直接在Svelte组件的onMount钩子中注入GSI脚本，等脚本加载完成后手动调用API渲染按钮，确保DOM元素存在后再执行初始化：

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    // 避免重复加载脚本
    if (!document.querySelector('#google-gsi-script')) {
      const script = document.createElement('script');
      script.id = 'google-gsi-script';
      script.src = 'https://accounts.google.com/gsi/client';
      script.async = true;
      script.defer = true;

      script.onload = () => {
        // 初始化Google登录配置
        window.google.accounts.id.initialize({
          client_id: '534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com',
          context: 'use',
          ux_mode: 'redirect',
          login_uri: 'http://localhost:5173/auth/callback'
        });
        // 渲染登录按钮到指定DOM元素
        window.google.accounts.id.renderButton(
          document.querySelector('.g_id_signin'),
          {
            type: 'standard',
            shape: 'rectangular',
            theme: 'outline',
            text: 'signin_with',
            size: 'medium',
            logo_alignment: 'left',
            width: '180'
          }
        );
      };

      document.head.appendChild(script);
    } else {
      // 脚本已加载，直接重新渲染按钮
      window.google.accounts.id.renderButton(
        document.querySelector('.g_id_signin'),
        {
          type: 'standard',
          shape: 'rectangular',
          theme: 'outline',
          text: 'signin_with',
          size: 'medium',
          logo_alignment: 'left',
          width: '180'
        }
      );
    }
  });
</script>

<svelte:head>
  <title>Home</title>
  <meta name="description" content="Svelte demo app" />
</svelte:head>

<section>
  <div class="h-screen">
    <div class="bg-red-300 h-80">
      <div class="g_id_signin"></div>
    </div>
  </div>
</section>

方案二：保留配置元素，手动触发初始化 #

如果你想保留原来的g_id_onload配置元素，可以手动引入脚本，然后在onMount中读取配置并初始化按钮：

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    // 确保Google API已加载
    if (!window.google?.accounts?.id) return;

    // 读取g_id_onload中的配置
    const configEl = document.getElementById('g_id_onload');
    const config = {
      client_id: configEl.dataset.clientId,
      context: configEl.dataset.context,
      ux_mode: configEl.dataset.uxMode,
      login_uri: configEl.dataset.loginUri
    };

    // 初始化并渲染按钮
    window.google.accounts.id.initialize(config);
    window.google.accounts.id.renderButton(
      document.querySelector('.g_id_signin'),
      {
        type: 'standard',
        shape: 'rectangular',
        theme: 'outline',
        text: 'signin_with',
        size: 'medium',
        logo_alignment: 'left',
        width: '180'
      }
    );
  });
</script>

<svelte:head>
  <title>Home</title>
  <meta name="description" content="Svelte demo app" />
  <!-- 手动引入GSI脚本 -->
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</svelte:head>

<section>
  <div class="h-screen">
    <div
      id="g_id_onload"
      data-client_id="534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com"
      data-context="use"
      data-ux_mode="redirect"
      data-login_uri="http://localhost:5173/auth/callback"
    />
    <div class="bg-red-300 h-80">
      <div class="g_id_signin"></div>
    </div>
  </div>
</section>

方案生效原因 #

自动初始化只在脚本首次加载时执行一次，而手动初始化是在Svelte组件挂载完成（DOM元素已存在）后调用Google API，确保每次页面刷新后，按钮元素都能被正确识别并渲染。

内容的提问来源于stack exchange，提问作者MathankumarK