在Vue.js项目中如何通过gapi实现谷歌账号登出功能

• TypeError: Cannot read properties of undefined (reading 'getAuthInstance')报错有两个核心诱因：一是你引入的谷歌platform.js是异步延迟加载的，Navbar组件挂载时gapi的auth2模块还未完成初始化；二是你仅在Login组件调用了登录按钮渲染逻辑，没有全局显式初始化auth2模块，其他页面无法访问到auth2实例。
• Cookie策略相关报错是因为你用的旧版Google Sign-In Platform.js依赖第三方Cookie，目前Chrome、Safari等主流浏览器默认拦截第三方Cookie，测试或上线场景都很容易触发该类限制。

方案1：适配现有代码的最小改动 #

无需调整现有登录逻辑，仅修改三处代码即可解决两个报错：

1. 调整index.html的SDK引入逻辑，新增全局初始化：

<meta name="google-signin-client_id" content="<my_client_id>.apps.googleusercontent.com">
<script>
  // SDK加载完成后自动初始化auth2模块
  window.gapiLoaded = function() {
    gapi.load('auth2', function() {
      gapi.auth2.init({
        client_id: '<my_client_id>.apps.googleusercontent.com'
      })
      // 把初始化完成的实例挂载到window上，全局组件都可直接调用
      window.googleAuth = gapi.auth2.getAuthInstance()
    })
  }
</script>
<!-- 新增onload回调触发初始化 -->
<script src="https://apis.google.com/js/platform.js?onload=gapiLoaded" async defer></script>

2. 修改Login组件的挂载逻辑，避免时序问题报错：

mounted() {
  // 轮询判断SDK初始化状态，初始化完成后再渲染登录按钮
  const initCheck = setInterval(() => {
    if (window.googleAuth) {
      clearInterval(initCheck)
      gapi.signin2.render('google-signin-button', {
        onsuccess: this.onSignIn
      })
    }
  }, 100)
}

3. 重写Navbar组件的logout方法，兼容异常场景：

logout: async function () {
  if(!confirm("Вы действительно хотите выйти?")) return
  // 实例未初始化时直接走本地登出逻辑，不阻塞用户操作
  if (!window.googleAuth) {
    await this.$store.dispatch('authentication/logout')
    this.$router.push('/login')
    return
  }
  try {
    await window.googleAuth.signOut()
    // 可选：调用disconnect彻底撤销账号授权，清除关联状态
    window.googleAuth.disconnect()
    console.log('user signed out')
  } catch (e) {
    // 捕获SDK异常（比如Cookie拦截导致的报错），不中断本地登出
    console.warn('Google SDK登出异常，直接执行本地登出', e)
  } finally {
    await this.$store.dispatch('authentication/logout')
    this.$router.push('/login')
  }
}

补充注意：使用旧版SDK时需要确认谷歌云后台配置：授权JavaScript来源已添加当前访问域名（本地开发需加http://localhost:端口号，不要用127.0.0.1访问）、OAuth同意屏幕已设置为正式发布状态，测试状态仅支持列表内的测试账号登录。

方案2：彻底解决Cookie拦截问题（推荐长期使用） #

旧版Platform.js已经被谷歌官方废弃，替代的Google Identity Services (GIS) SDK不依赖第三方Cookie，不会触发浏览器拦截：

1. 替换index.html的SDK引入：

<meta name="google-signin-client_id" content="<my_client_id>.apps.googleusercontent.com">
<script src="https://accounts.google.com/gsi/client" async defer></script>

2. 登出逻辑简化为一行代码，不需要依赖全局实例，不会出现undefined报错：

logout: async function () {
  if(!confirm("Вы действительно хотите выйти?")) return
  // 直接调用GIS SDK登出方法，无第三方Cookie依赖
  window.google?.accounts.id.disableAutoSelect()
  await this.$store.dispatch('authentication/logout')
  this.$router.push('/login')
}

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