Svelte中如何让含导入模块的Google登录回调函数全局可见？

核心思路 #

通过Svelte根组件的onMount钩子，将依赖模块的回调函数挂载到window全局对象上，既满足Google登录按钮对全局回调的要求，又能正常使用ES模块导入的工具（比如jwt-decode）。

具体实现步骤 #

1. 在根布局组件（+layout.svelte）中处理逻辑
   根布局组件会在应用首次加载时渲染且仅执行一次，完美匹配“全局可见且仅首次加载执行”的需求。

   <script>
     import { onMount } from 'svelte';
     import jwt_decode from 'jwt-decode';
   
     onMount(() => {
       // 定义回调函数并挂载到window全局
       window.handleCredentialResponse = (response) => {
         localStorage.setItem("googleCredentials", JSON.stringify(response));
         // 注意：response本身是对象，直接取credential字段即可
         const jwt = jwt_decode(response.credential);
         localStorage.setItem('decodedJwt', JSON.stringify(jwt));
         window.location.reload();
       };
   
       // 可选：动态加载Google登录脚本（替代在app.html中提前引入）
       // const script = document.createElement('script');
       // script.src = 'https://accounts.google.com/gsi/client';
       // script.async = true;
       // script.defer = true;
       // document.body.appendChild(script);
   
       // 可选：组件卸载时清理全局函数（根布局一般不会卸载，可省略）
       return () => {
         delete window.handleCredentialResponse;
       };
     });
   </script>
   
   <!-- Google登录按钮相关DOM -->
   <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
     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"
   />
   

2. 移除app.html中的相关全局脚本
   不需要在app.html中编写任何回调函数或额外引入模块脚本，所有逻辑都由Svelte组件处理。

方案优势 #

• 既满足Google登录对全局回调的要求，又能正常使用ES模块导入的工具库
• 根布局的onMount仅执行一次，避免重复初始化
• 代码集中在Svelte组件中，便于维护和复用
• 可选的全局函数清理逻辑，避免全局变量污染

内容的提问来源于stack exchange，提问作者Evil Toad