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

Question

我遵循Google提供的指南來整合新的Google登入。我使用Google提供的程式碼產生器建立了HTML。這裡我附上了完整的程式碼Home

P粉018548441 · Answer

現在我使用 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) 中運作

P粉696146205 · Answer

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

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