Angular14集成Google Identity 路由返回后登录按钮不显示

这个问题是两个逻辑缺陷共同导致的：

1. Google Identity Service（GIS）的脚本在单页应用中只会全局加载一次，你两次给window.onGoogleLibraryLoad赋值，第一次加载脚本时会触发回调渲染按钮，但路由跳转后再回到登录页时，脚本早已加载完成，这个全局回调不会二次触发，渲染逻辑根本不会执行。
2. 你直接用document.getElementById获取DOM节点，Angular路由销毁组件时旧的按钮容器已经被从DOM树移除，返回登录页生成的新容器没有触发重新渲染逻辑，自然不会生成对应的iframe、按钮不会显示。

• 放弃全局window.onGoogleLibraryLoad回调，改为自行判断GIS加载状态，脚本已存在时直接执行渲染逻辑，避免回调被覆盖、不触发的问题
• 用Angular原生的@ViewChild获取按钮容器，在ngAfterViewInit生命周期（确保DOM已经渲染完成）里执行按钮渲染，不要在ngOnInit阶段操作DOM
• 组件销毁时主动调用GIS的取消方法清理全局状态，避免实例残留

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
// 声明全局google类型，替代零散的@ts-ignore
declare const google: any;

@Component({
  selector: 'app-login',
  template: `
    <!-- 原有登录页表单内容 -->
    <div #googleLoginBtn></div>
  `
})
export class LoginComponent implements AfterViewInit, OnDestroy {
  @ViewChild('googleLoginBtn') googleBtnRef!: ElementRef<HTMLElement>;
  // 替换为你自己在Google云控制台申请的完整客户端ID
  private readonly GOOGLE_CLIENT_ID = '替换为你的真实client_id.apps.googleusercontent.com';

  ngAfterViewInit(): void {
    this.initGoogleLogin();
  }

  ngOnDestroy(): void {
    // 组件销毁时关闭GIS的全局提示，避免内存泄漏
    if (google?.accounts?.id) {
      google.accounts.id.cancel();
    }
  }

  private initGoogleLogin(): void {
    // 脚本已经加载过的场景（路由返回时会走到这里），直接渲染按钮
    if (window.google?.accounts?.id) {
      this.renderGoogleBtn();
      return;
    }

    // 首次进入动态加载GIS脚本
    const gsiScript = document.createElement('script');
    gsiScript.src = 'https://accounts.google.com/gsi/client';
    gsiScript.async = true;
    gsiScript.defer = true;
    gsiScript.onload = () => this.renderGoogleBtn();
    document.head.appendChild(gsiScript);
  }

  private renderGoogleBtn(): void {
    // 初始化GIS配置
    google.accounts.id.initialize({
      client_id: this.GOOGLE_CLIENT_ID,
      itp_support: true,
      callback: this.handleGoogleLoginResp.bind(this),
      auto_select: false
    });

    // 登出后禁用自动选择，避免自动登录
    google.accounts.id.disableAutoSelect();

    const btnContainer = this.googleBtnRef.nativeElement;
    // 清空容器残留内容，避免重复渲染冲突
    btnContainer.innerHTML = '';
    // 渲染登录按钮
    google.accounts.id.renderButton(btnContainer, {
      theme: 'filled_blue',
      size: 'medium',
      width: 200
    });

    // 弹出一键登录提示
    google.accounts.id.prompt();
  }

  private handleGoogleLoginResp(response: any): void {
    // 这里写你的登录逻辑：拿到response.credential传给后端校验
    console.log('Google登录凭证：', response.credential);
  }
}

• 你原有代码里的clientId是占位符2.apps.googleusercontent.com，必须替换为完整的有效客户端ID，否则按钮也会渲染异常
• 应用执行登出逻辑时，除了清理本地存储的token、用户信息，建议主动调用一次google.accounts.id.disableAutoSelect()，避免返回登录页时自动触发登录
• 不要在多个组件里重复加载GIS脚本，也不要重复调用initialize方法，全局初始化一次即可

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