Svelte应用中集成外部库全局回调函数的最佳实践

<script>
    import { onMount } from 'svelte';
    import jwt_decode from 'jwt-decode'; // 假设你已安装 jwt-decode

    /**
     * Google Sign-In 凭证响应处理函数。
     * 该函数定义在Svelte组件内部，可以自由导入和使用其他模块。
     * @param {Object} response - Google返回的凭证响应对象。
     */
    function handleCredentialResponse(response) {
        console.log('Google Sign-In 凭证响应:', response);

        // 将原始凭证存储到 localStorage
        localStorage.setItem('googleCredentials', JSON.stringify(response));

        // 解码JWT凭证
        try {
            const decodedJwt = jwt_decode(response.credential);
            localStorage.setItem('decodedJwt', JSON.stringify(decodedJwt));
            console.log('解码后的JWT:', decodedJwt);
        } catch (error) {
            console.error('解码JWT失败:', error);
            // 可以在此处处理解码失败的情况，例如清除存储或显示错误消息
        }

        // 刷新页面或进行其他导航操作
        // window.location.reload(); 
        // 实际应用中，可能更倾向于使用Svelte Router进行导航或更新组件状态
    }

    // 在组件挂载后执行初始化逻辑
    onMount(() => {
        // 确保 Google Identity Services 库已加载
        // 如果是通过 <script src="https://accounts.google.com/gsi/client"></script> 引入，
        // 则 `google` 对象会在全局可用。
        if (window.google && window.google.accounts && window.google.accounts.id) {
            // 初始化 Google Identity Services
            google.accounts.id.initialize({
                client_id: '<你的Google Client ID>.apps.googleusercontent.com', // 替换为你的实际Client ID
                callback: handleCredentialResponse, // 将Svelte组件内部的函数作为回调
                // 其他可选配置，例如 context, ux_mode, auto_prompt 等
                context: 'signin',
                ux_mode: 'popup',
                auto_prompt: false,
            });

            // 渲染 Google Sign-In 按钮
            // 可以通过 ID 找到一个 DOM 元素作为按钮的父容器
            const parentElement = document.getElementById('g_id_signin_button_container');
            if (parentElement) {
                google.accounts.id.renderButton(parentElement, {
                    type: 'standard',
                    shape: 'rectangular',
                    theme: 'filled_blue',
                    text: 'signin_with',
                    size: 'large',
                    logo_alignment: 'left'
                });
            } else {
                console.error("未找到用于渲染Google Sign-In按钮的DOM元素.");
            }

            // 如果需要自动提示，可以使用 prompt()
            // google.accounts.id.prompt();
        } else {
            console.error("Google Identity Services 库未加载或未完全初始化。");
        }
    });
</script>

<!-- 这是一个用于渲染 Google Sign-In 按钮的占位符容器 -->
<div id="g_id_signin_button_container"></div>

<!-- 
    注意：通常你还需要在 `public/index.html` 或 `app.html` 中引入 Google Identity Services 库：
    <script src="https://accounts.google.com/gsi/client" async defer></script>

    或者，如果你希望按钮在页面加载时自动初始化，可以保留 `g_id_onload` div，
    但将 `data-callback` 属性移除，并确保 `google.accounts.id.initialize` 在 `onMount` 中执行。
    然而，为了完全控制回调，上述方法是更推荐的。
-->

<style>
    /* 可以在这里添加按钮的样式，如果需要的话 */
</style>