使用AngularFireAuthGuard时getRedirectResult返回null的问题

你的核心问题在于AngularFireAuthGuard的重定向逻辑会在getRedirectResult完成错误捕获前触发：当第三方登录（Facebook/Twitter）出现auth/account-exists-with-different-credential错误时，AuthGuard检测到临时的登录状态变化，立即执行重定向，导致SignInComponent被销毁，getRedirectResult还没来得及捕获错误就返回null。

通过调整AuthService的错误处理逻辑，结合路由守卫的延迟重定向，确保错误信息被正确捕获后再执行页面跳转。

1. 修改AuthService，存储登录错误状态 #

在AuthService中添加错误状态的订阅流，专门处理重定向登录的错误：

// auth-service.ts
import { BehaviorSubject, Observable } from 'rxjs';

export class AuthService {
  currentUser: UserInfo | null = null;
  private authStateSub = new BehaviorSubject<UserInfo | null>(null);
  private loginErrorSub = new BehaviorSubject<Error | null>(null); // 新增错误流
  currentAuthStatus = this.authStateSub.asObservable();
  loginError$ = this.loginErrorSub.asObservable(); // 暴露错误订阅

  constructor(private auth: Auth, public angularFire: AngularFireAuth) {
    this.authStatusListener();
    this.handleRedirectResult(); // 新增：处理重定向结果
  }

  // 新增：统一处理重定向登录的结果和错误
  private handleRedirectResult() {
    getRedirectResult(this.auth)
      .then(user => {
        if (user) {
          localStorage.setItem('user', JSON.stringify(user));
        }
      })
      .catch(error => {
        this.loginErrorSub.next(error);
        // 如果是账号关联错误，这里可以提前获取登录方式，也可以留给组件处理
        if (error.code === 'auth/account-exists-with-different-credential') {
          this.angularFire.fetchSignInMethodsForEmail(error.credential.email)
            .then(methods => console.log('已绑定的登录方式:', methods));
        }
      });
  }

  // 其余原有代码不变...
}

2. 调整SignInComponent，订阅错误流处理逻辑 #

不再在ngOnInit中直接调用getRedirectResult，改为订阅AuthService的错误流：

// sign-in.component.ts
export class SignInComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(
    private translate: TranslateService,
    private auth: Auth,
    private afAuth: AngularFireAuth,
    private authService: AuthService
  ) {}

  ngOnInit(): void {
    // 订阅登录错误
    this.authService.loginError$
      .pipe(takeUntil(this.destroy$))
      .subscribe(error => {
        if (!error) return;
        const code = error.code;
        const credential = error.credential as OAuthCredential;

        if (code === 'auth/account-exists-with-different-credential') {
          this.afAuth.fetchSignInMethodsForEmail(credential.email)
            .then(methods => {
              // 这里处理账号关联逻辑，比如提示用户用已绑定的方式登录后关联
              console.log('该邮箱已绑定以下登录方式:', methods);
            });
        }
        console.log('登录错误:', error);
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  // 其余原有登录方法不变...
}

3. 修改路由守卫，延迟重定向直到错误处理完成 #

调整redirectLoggedInToDashboard，确保只有在没有登录错误时才执行重定向：

// app-routing.module.ts
import { map, take } from 'rxjs/operators';

const redirectLoggedInToDashboard = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  return inject(AuthService).loginError$.pipe(
    take(1), // 只取一次错误状态
    map(error => {
      if (error) {
        // 存在登录错误，停留在登录页处理
        return true;
      }
      // 无错误，执行原有重定向逻辑
      let returnUrl = next.queryParams['redirectTo'];
      return returnUrl ? redirectLoggedInTo(returnUrl) : redirectLoggedInTo('/');
    })
  );
};

// 其余路由配置不变...

1. 将getRedirectResult的错误处理移到AuthService中，确保错误不会因为组件销毁而丢失；
2. 路由守卫等待错误状态确认后再执行重定向，给错误处理留出足够时间；
3. 通过订阅流的方式传递错误，避免在组件初始化时的异步竞态问题。

内容的提问来源于stack exchange，提问作者Rafael Osuna Dominguez