Angular 5迁移后AngularFire2登录立即登出问题求助

我之前帮同事排查过几乎一模一样的问题，结合AngularFire2 v5.x和Angular 5的特性，大概率是初始化配置、订阅逻辑或者Firebase控制台设置出了问题，给你几个具体的排查和解决方向：

1. 检查AngularFire的初始化配置 #

AngularFire2 v5.x的初始化方式和旧版本有差异，很容易在这里踩坑：

• 确保在AppModule里正确导入AngularFireModule和AngularFireAuthModule，并且用环境变量里的Firebase配置初始化：

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    // 务必用initializeApp传入完整的Firebase配置
    AngularFireModule.initializeApp(environment.firebase),
    // 不要漏掉导入认证模块
    AngularFireAuthModule
  ]
})
export class AppModule { }

• 核对environment.ts里的Firebase配置，特别是authDomain、apiKey、projectId这些字段，有没有复制错误，哪怕一个字符错了都可能导致认证异常。

2. 检查登录逻辑的订阅处理 #

• 你用的signInWithPopup是异步操作，要确保没有在代码里不小心触发登出逻辑，比如有没有误调用signOut()？或者订阅authState的时候用了take(1)这类会自动取消订阅的操作符？
• 另外，authState的订阅要保持活跃，建议在组件的ngOnInit里订阅，在ngOnDestroy里取消订阅，既避免内存泄漏，又能保证监听持续生效：

import { Subscription } from 'rxjs';
import { AngularFireAuth } from 'angularfire2/auth';
import { auth } from 'firebase/app';

@Component({...})
export class LoginComponent implements OnInit, OnDestroy {
  private authSub: Subscription;

  constructor(private afAuth: AngularFireAuth) { }

  ngOnInit() {
    this.authSub = this.afAuth.authState.subscribe(user => {
      if (user) {
        console.log('登录状态：已登录', user.uid);
      } else {
        console.log('登录状态：已登出');
      }
    });
  }

  googleLogin() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider())
      .then(res => console.log('登录成功', res.user))
      .catch(err => console.error('登录失败', err));
  }

  ngOnDestroy() {
    this.authSub?.unsubscribe();
  }
}

3. 检查Firebase控制台的认证设置 #

• 登录Firebase控制台，进入你的项目，在Authentication > 设置 > 授权域里，确认你的开发域名（比如http://localhost:4200）已经添加进去。如果没添加，Firebase会拒绝认证回调，导致用户登录后立刻被踢出去。
• 同时检查登录方式里的Google登录是否处于启用状态，有没有配置正确的OAuth客户端ID。

4. 升级AngularFire2到稳定版 #

你当前用的是5.0.0-rc.6，这个RC版本存在一些已知的认证兼容问题，建议直接升级到最新稳定版：

npm install angularfire2@latest firebase@latest --save

如果以上方法都没用，打开浏览器的开发者工具，查看控制台和网络标签页，有没有CORS错误、认证请求失败的信息，这些日志能帮你定位更具体的问题。

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