刷新頁面後，新的Google登入選項消失

Question

我遵循 Google 提供的指南來整合新的 Google 登入。我使用 Google 提供的程式碼產生器創建了 HTML。

這裡我附上了完整的程式碼

<svelte:head>
    <title>Home</title>
    <meta name="description" content="Svelte demo app" />
</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"
                data-type="standard"
                data-shape="rectangular"
                data-theme="outline"
                data-text="signin_with"
                data-size="medium"
                data-logo_alignment="left"
                data-width="180"
            />
        </div>
    </div>
</section>

第一次渲染頁面時效果很好。

當我們使用 Command R 或點擊瀏覽器中的重新載入圖示來刷新頁面時，登入按鈕消失。

Answer 1

現在我使用 Javascript 創建了元件，在這裡我添加了答案。

我在 app.d.ts 中將 google 宣告為全域變數

// See https://kit.svelte.dev/docs/types#app
    // for information about these interfaces
    declare global {
        const google: any;
        namespace App {
        }
    }
export {};

我建立了一個 svelte 檔案來建立用於登入按鈕的 svelte 元件

let canvas: any; //Created a variable to optain a reference to rendered div element
    

在 onMount 中

onMount(async () => {   
    google.accounts.id.initialize({
                client_id: "534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com",
                ux_mode: "redirect",
                context: "use",
                login_uri: "http://localhost:5173/auth/callback"
            });
            google.accounts.id.renderButton(canvas, {
                width: '220',      
                theme: 'outline',
                size: 'large',
                type: 'standard',
                text: 'signin_with',
                shape: 'rectangular',
                logo_alignment: 'left',
                  
            });

    });

此程式碼將在初始渲染、硬重新載入 (Command shift R) 和重新載入 (Command R) 中運作

Answer 2

使用 SvelteKit 時，硬重新載入是在伺服器端呈現的。程式碼可能與此不相容或執行順序錯誤。

檢查控制台是否有錯誤，並將必須在客戶端上執行的程式碼移至onMount< /a>#.您也可以使用ssr#頁面選項 關閉特定頁面的伺服器端渲染作為最後的手段。