vue3 实现谷歌登录

很多人都是直接在 index.html 文件中引入的，刚开始我也那样写但是谷歌的api只能调起一次后续就不会生效了

我的登录是个弹窗，写在app.vue 文件中 

const isGoogleLoaded = ref(true);onMounted(async () => {initialize();
});
// 初始化
const initialize = () => {loadGoogleSDK().then(() => {isGoogleLoaded.value = true;// 渲染谷歌登录按钮initGoogle();}).catch((err) => {isGoogleLoaded.value = false;});
};

加载Google SDK 

function loadGoogleSDK() {return new Promise((resolve, reject) => {if (window.google) {resolve(window.google);return;}const script = document.createElement('script');script.src = 'https://accounts.google.com/gsi/client';script.async = true;script.onload = () => resolve(window.google);script.onerror = () => reject();document.body.appendChild(script);});
}

初始化按钮

<div id="g_id_onload" v-if="isGoogleLoaded"></div>const googleId = 'YOUR_GOOGLE_CLIENT_ID', // 替换为你的 Client ID// 初始化google - 全局生效
function initGoogle() {window.google.accounts.id.initialize({client_id: googleId,// 谷歌登录成功后的回调函数callback: handleGoogleCredentialResponse,// 剩下这些都不重要auto_select: false,cancel_on_tap_outside: true,use_fedcm_for_prompt: false,itp_support: true,});// 渲染按钮window.google.accounts.id.renderButton(document.getElementById('g_id_onload'),{ theme: 'outline', size: 'large'});
}//登录成功后的回调  返回一个验证令牌去验证是否登录成功
const handleGoogleCredentialResponse = async (response) => {var res = await googleLogin(response.credential);// 成功之后就去获取用户信息if (res.code == 0) {localStorage.setItem('token', res.data.accessToken);} else {ElMessage.error(res.msg);}
};// 退出登录
window.google.accounts.id.disableAutoSelect();

 因为我的登录是弹窗的形式 在其他页面也会调起这个弹窗 这个弹窗用 pinia 控制  然后在 app.vue 中监听 pinia 中弹窗的状态

watch(() => userInfoStore.loginModelType,async (newValue, oldValue) => {if (newValue) {initialize();}},{ deep: true }
);

 文档：https://developers.google.com/identity/gsi/web/guides/display-button?hl=zh-cn