Svelte应用中优雅集成第三方全局回调函数与模块依赖

<!-- app.html 或 Svelte 组件的 HTML 部分 -->
<div
    id="g_id_onload"
    data-client_id="<id>.apps.googleusercontent.com"
    data-context="signin"
    data-ux_mode="popup"
    data-callback="handleCredentialResponse" <!-- 回调函数名 -->
    data-auto_prompt="false"
></div>
<div
    class="g_id_signin"
    data-type="standard"
    data-shape="rectangular"
    data-theme="filled_blue"
    data-text="signin_with"
    data-size="large"
    data-logo_alignment="left"
></div>

// 如果直接放在 app.html 的 <script> 标签中，jwt_decode 将未定义
function handleCredentialResponse(response) {
    // ...
    let jwt = jwt_decode(response.credential); // 错误：jwt_decode 未定义
    // ...
}

<script>
    import { onMount } from 'svelte';
    import jwt_decode from 'jwt-decode'; // 导入所需的模块

    // 在Svelte组件内部定义回调函数，可以安全地使用导入的模块
    function handleCredentialResponse(response) {
        localStorage.setItem('googleCredentials', JSON.stringify(response));

        // 解码JWT令牌
        let jwt = jwt_decode(response.credential);
        localStorage.setItem('decodedJwt', JSON.stringify(jwt));

        // 刷新页面或执行其他逻辑
        window.location.reload();
    }

    onMount(() => {
        // 确保 Google Identity Services 库已加载
        if (window.google && window.google.accounts && window.google.accounts.id) {
            // 初始化 Google Identity Services
            google.accounts.id.initialize({
                client_id: '<YOUR_GOOGLE_CLIENT_ID>.apps.googleusercontent.com',
                callback: handleCredentialResponse // 将内部函数作为回调传递
            });

            // 渲染 Google 登录按钮
            // 注意：如果 HTML 中已经有 <div class="g_id_signin">，则不需要再次渲染
            // 但如果需要更细粒度的控制，或者 HTML 中只有 g_id_onload 容器，
            // 可以通过 renderButton 方法手动渲染
            const parent = document.getElementById('g_id_onload');
            if (parent) {
                google.accounts.id.renderButton(parent, { theme: 'filled_blue', size: 'large' });
            }
        } else {
            console.error('Google Identity Services library not loaded.');
            // 可以添加重试逻辑或用户提示
        }
    });
</script>

<!-- HTML 结构，不再包含 data-callback 属性 -->
<div
    id="g_id_onload"
    data-client_id="<YOUR_GOOGLE_CLIENT_ID>.apps.googleusercontent.com"
    data-context="signin"
    data-ux_mode="popup"
    data-auto_prompt="false"
></div>

<!-- 如果需要 Google 提供的默认按钮样式，可以保留此 div -->
<div
    class="g_id_signin"
    data-type="standard"
    data-shape="rectangular"
    data-theme="filled_blue"
    data-text="signin_with"
    data-size="large"
    data-logo_alignment="left"
></div>