Angular 16 结合 Firebase 认证页面刷新后用户数据丢失问题

核心问题 #

页面刷新后用户数据丢失，本质是AuthService的userCredentials信号在刷新后重置为初始值undefined，且没有在服务初始化时主动同步Firebase Auth的持久化认证状态，仅在登录/注册操作时手动设置信号值。

修复步骤 #

1. 改造AuthService，添加认证状态监听 #

在服务初始化时订阅Firebase Auth的状态变化，确保页面刷新后自动恢复用户数据：

@Injectable({ providedIn: 'root' }) // 确保服务为单例，避免多实例状态不一致
export class AuthService {

  userCredentials: WritableSignal<UserCredential | undefined> = signal(undefined);

  constructor(private angularFireAuth: AngularFireAuth, private router: Router) {
    // 监听Firebase Auth状态，页面刷新时自动同步用户数据
    this.angularFireAuth.authState.subscribe(async user => {
      if (user) {
        // 通过用户刷新令牌重新获取认证凭证，同步到信号中
        try {
          const cred = await this.angularFireAuth.signInWithCustomToken(await user.refreshToken);
          this.userCredentials.set(cred);
        } catch (err) {
          console.error('同步用户状态失败:', err);
        }
      } else {
        this.userCredentials.set(undefined);
      }
    });
  }

  // 保留原有登录/注册/登出方法不变
}

2. 修复组件中的信号同步逻辑 #

组件内的effect写法错误，直接赋值信号引用无效，需通过调用信号的set方法更新值：

constructor(private readonly authService: AuthService, private sanitizer: DomSanitizer) {
  // 监听服务信号变化，同步组件内信号
  effect(() => {
    this.userCredentials.set(this.authService.userCredentials());
  });
}

3. 清理冲突依赖 #

package.json中同时存在新旧版本AngularFire（@angular/fire和angularfire2），会导致运行冲突，删除旧版本：

"dependencies": {
  // 移除 "angularfire2": "^5.4.2"
}

4. 确保服务单例模式 #

AuthService的@Injectable()必须指定providedIn: 'root'，避免页面刷新或路由切换时创建新实例导致状态丢失。

关键逻辑说明 #

• Firebase Auth默认会在浏览器本地存储用户会话，页面刷新时自动恢复，但需通过authState订阅才能获取恢复后的用户状态。
• Angular 16的Signals是内存级响应式状态，页面刷新后会重置为初始值，必须依赖外部持久化数据源（如Firebase Auth状态、localStorage）重新填充。
• 原代码仅在主动登录时设置信号值，未处理刷新后的状态恢复流程，导致数据丢失。

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