网站使用Google Plus实现登录登出：登出功能失效问题排查

你的登录功能没问题，但登出失效通常是因为**gapi.auth2实例未正确初始化或者登出后没重置UI与会话状态**。我帮你调整下代码，应该就能解决：

修复后的完整代码 #

<html>
  <meta name="google-signin-client_id" content="fsdfsdf.apps.googleusercontent.com">
  <title>Login With Google Plus</title>
  <script src="jquery.min.js"></script>
  <script src="https://apis.google.com/js/client:platform.js" async defer></script>
  
  <!-- 登录容器 -->
  <div class="g-signin2" data-onsuccess="onSignIn" data-onfailure="onSignInFailure"></div>
  
  <!-- 登出链接 -->
  <a href="#" id="signout" onclick="signOut();" style="display: none;">Sign out</a>

  <script>
    // 全局保存auth2实例，避免重复获取
    let auth2;

    // 页面加载时初始化gapi.auth2，确保登出时实例已就绪
    window.onload = function() {
      gapi.load('auth2', function() {
        auth2 = gapi.auth2.init({
          client_id: 'fsdfsdf.apps.googleusercontent.com'
        });
      });
    };

    function onSignIn(googleUser) {
      const profile = googleUser.getBasicProfile();
      console.log('ID: ' + profile.getId());
      console.log('Name: ' + profile.getName());
      console.log('Image URL: ' + profile.getImageUrl());
      console.log('Email: ' + profile.getEmail());
      
      // 显示登出按钮
      $('#signout').show();
    }

    function onSignInFailure(error) {
      console.error('登录失败:', error);
    }

    function signOut() {
      if (!auth2) {
        console.error('Auth2实例未初始化完成');
        return;
      }

      // 先执行登出，再可选断开授权（彻底清除应用授权记录）
      auth2.signOut().then(() => {
        console.log('User signed out.');
        return auth2.disconnect();
      }).then(() => {
        // 重置UI：隐藏登出按钮，重新渲染登录组件
        $('#signout').hide();
        $('.g-signin2').empty();
        gapi.signin2.render('.g-signin2', {
          'onsuccess': onSignIn,
          'onfailure': onSignInFailure
        });
      }).catch(error => {
        console.error('登出过程出错:', error);
      });
    }
  </script>
</html>

关键修复点说明 #

• 提前初始化auth2实例：在页面加载阶段就完成gapi.auth2的初始化，避免登出时实例还处于未就绪状态，导致signOut()执行不彻底。
• 登出后重置UI：原登录按钮在用户登录后会被Google组件替换，登出后需要重新渲染登录按钮，同时隐藏登出按钮，让用户能直观看到状态变化。
• 可选调用disconnect()：signOut()仅结束当前会话，但用户的应用授权记录仍保留在Google端。如果需要让用户下次登录必须重新确认授权（比如切换账号），加上auth2.disconnect()可以彻底移除当前应用的授权记录。

原代码失效的原因 #

你原代码中直接调用gapi.auth2.getAuthInstance()，如果这个调用发生在gapi.auth2初始化完成前，拿到的实例状态异常，会导致signOut()仅打印日志但未真正销毁会话。另外，登出后没有重置登录按钮，视觉上也会让你误以为登出未生效。

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