刷新页面后，新的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.您还可以使用 ssr 页面选项 关闭特定页面的服务器端渲染作为最后的手段。