Angular路由应用中已登录仍弹出Google登录提示的解决方法

问题原因分析 #

1. 包版本不兼容：你使用的旧版angularx-social-login（2.1.0）已停止维护，与Angular 16存在兼容性问题，导致登录状态无法正确持久化和恢复。
2. 未开启自动登录恢复：当前配置autoLogin: false，服务不会在应用初始化/路由切换时自动检查并恢复已有的Google登录会话，导致user状态短暂为空，触发登录按钮渲染并弹出登录弹窗。

解决方案 #

步骤1：替换为兼容的登录包 #

卸载旧包并安装官方维护的新版包：

npm uninstall angularx-social-login
npm install @abacritt/angularx-social-login

步骤2：更新AppModule配置 #

修改导入路径并开启autoLogin，让服务自动恢复登录状态：

// 注意更新导入路径
import { SocialAuthServiceConfig, GoogleLoginProvider } from '@abacritt/angularx-social-login';

// ...其他代码
providers: [
 {
  provide: 'SocialAuthServiceConfig',
  useValue: {
    autoLogin: true, // 改为true，自动恢复登录会话
    providers: [
      {
        id: GoogleLoginProvider.PROVIDER_ID,
        provider: new GoogleLoginProvider(
          'foo.apps.googleusercontent.com'
        )
      }
    ],
    onError: (err) => {
      console.error(err);
    }
  } as SocialAuthServiceConfig,
 }
],

步骤3：优化AppComponent的状态处理 #

添加加载状态避免短暂的user为空导致登录按钮渲染：

export class AppComponent {
  user: SocialUser | null = null;
  isLoading = true; // 添加加载状态

  constructor(private _authService: SocialAuthService) {
    this._authService.authState.subscribe((user) => {
      this.user = user;
      this.isLoading = false; // 获取状态后结束加载
    });
  }
}

更新AppComponent的HTML，在加载完成前不显示登录按钮：

<div class="container">
  <!-- 加载状态下可显示加载提示或空白 -->
  <div *ngIf="isLoading">Loading...</div>

  <div *ngIf="!isLoading && !user">
    <h2>Login</h2>
    <asl-google-signin-button type='standard' size='medium'></asl-google-signin-button>
  </div>

  <div *ngIf="!isLoading && user">
    <router-outlet></router-outlet>
  </div>
</div>

额外说明 #

• 新版@abacritt/angularx-social-login完全支持Angular 16+，修复了旧版本的状态管理问题。
• autoLogin: true会让服务在初始化时自动调用Google的认证接口，检查是否存在有效的登录会话，无需用户手动触发登录。

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