使用Google Identity API登出功能失效，如何正确实现登出操作？

问题原因 #

你当前代码仅调用了google.accounts.id.disableAutoSelect()方法，该方法仅负责关闭账号自动选择逻辑，不会清除用户的授权状态和本地存储的登录缓存，因此无法实现真正的登出效果。

正确实现步骤 #

• 清除本地存储的所有用户登录相关数据，包括保存在localStorage、sessionStorage、cookie中的用户凭证、头像、用户名等信息
• 调用google.accounts.id.revoke()方法撤销当前用户的授权，传入当前登录用户的邮箱作为参数，彻底解除Google侧的账号关联
• 登出逻辑执行完成后，手动重新渲染Google登录按钮，恢复到未登录的初始状态

完整代码示例 #

const button = document.getElementById('signout_button');
// 示例：假设登录时已将用户邮箱存储在localStorage的userEmail字段中
button.onclick = () => {
  const currentUserEmail = localStorage.getItem('userEmail');
  if (currentUserEmail) {
    // 撤销当前用户的授权
    google.accounts.id.revoke(currentUserEmail, () => {
      // 清除本地所有登录相关缓存
      localStorage.removeItem('userEmail');
      localStorage.removeItem('userName');
      localStorage.removeItem('userAvatar');
      // 关闭账号自动选择功能
      google.accounts.id.disableAutoSelect();
      // 重新渲染初始状态的Google登录按钮
      // 此处参数和你初始化登录按钮时的配置保持一致即可
      google.accounts.id.renderButton(
        document.getElementById('g_id_signin'),
        { theme: 'outline', size: 'large', text: 'signin_with' }
      );
      console.log('logged out successfully');
    });
  }
};

效果参考 #

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