使用angular5-social-login时谷歌登录选账号弹窗关闭触发错误处理咨询

嘿，这个问题我之前也碰到过，处理起来其实挺简单的——核心就是利用RxJS的catchError操作符捕获这个特定的弹窗关闭错误，既能消除控制台的报错信息，还能根据需求给用户友好的反馈。

核心思路 #

当用户主动关闭Google账号选择弹窗时，angular5-social-login会抛出popup_closed_by_user这个特定错误。我们只需要在登录的Observable流中捕获这个错误，判断类型后做针对性处理即可。

方法1：静默处理（仅消除控制台报错） #

如果不需要给用户额外提示，只希望清除控制台的错误日志，可以这样修改你的代码：

import { Component, OnInit } from '@angular/core';
import { AuthService, GoogleLoginProvider } from 'angular5-social-login';
import { catchError, EMPTY } from 'rxjs'; // 记得导入EMPTY

@Component({
  selector: 'app-google-login',
  templateUrl: './google-login.component.html',
  styleUrls: ['./google-login.component.css']
})
export class GoogleLoginComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
  }

  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID)
      .pipe(
        catchError((error) => {
          // 判断是否是用户关闭弹窗的错误
          if (error === 'popup_closed_by_user') {
            // 可选：打印友好日志方便调试
            console.log('用户主动取消了Google登录');
            // 返回EMPTY让Observable流正常结束，不触发错误回调
            return EMPTY;
          }
          // 其他类型错误（比如网络问题、授权失败）继续抛出，方便后续处理
          throw error;
        })
      )
      .subscribe(
        (user) => {
          // 登录成功后的业务逻辑，比如存储用户信息、跳转页面等
          console.log('Google登录成功', user);
        }
      );
  }
}

方法2：给用户显示友好提示 #

如果想让用户清楚知道自己取消了登录操作，可以结合Angular的提示组件（比如Material的Snackbar）给出视觉反馈：

import { Component, OnInit } from '@angular/core';
import { AuthService, GoogleLoginProvider } from 'angular5-social-login';
import { catchError, EMPTY } from 'rxjs';
import { MatSnackBar } from '@angular/material/snack-bar'; // 导入Snackbar组件

@Component({
  selector: 'app-google-login',
  templateUrl: './google-login.component.html',
  styleUrls: ['./google-login.component.css']
})
export class GoogleLoginComponent implements OnInit {

  constructor(
    private authService: AuthService,
    private snackBar: MatSnackBar // 注入Snackbar服务
  ) { }

  ngOnInit(): void {
  }

  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID)
      .pipe(
        catchError((error) => {
          if (error === 'popup_closed_by_user') {
            // 给用户显示取消登录的提示
            this.snackBar.open('你已取消登录', '关闭', { duration: 2000 });
            return EMPTY;
          }
          // 其他错误显示通用失败提示
          this.snackBar.open('登录失败，请稍后重试', '关闭', { duration: 2000 });
          throw error;
        })
      )
      .subscribe(
        (user) => {
          console.log('Google登录成功', user);
          // 处理登录成功逻辑
        }
      );
  }
}

小提示 #

• 如果你不用Angular Material，也可以用自定义提示组件或者原生alert来实现反馈
• 确保正确导入RxJS的catchError和EMPTY（也可以用of(null)替代EMPTY，效果类似）
• 非弹窗关闭类的错误依然会被抛出，你可以根据业务需求添加更多针对性的错误处理逻辑

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