如何在Angular应用启动前等待Firebase Auth并显示加载图标

你的思路完全可行，APP_INITIALIZER确实是实现应用初始化等待的合适方案，下面我们一步步完善你的代码并解决加载图标的显示问题：

一、优化APP_INITIALIZER初始化逻辑 #

你当前的初始化函数已经基本正确，我们可以用RxJS的操作符简化代码，避免嵌套的Promise与Observable：

import { from, of } from 'rxjs';
import { take, switchMap, tap } from 'rxjs/operators';

export function initApp(auth: AuthService, afAuth: AngularFireAuth) {
  return () => 
    afAuth.user.pipe(
      take(1), // 只取一次用户状态
      switchMap(user => {
        if (user) {
          // 将Promise转为Observable，等待令牌获取完成
          return from(auth.setCredentials(user));
        }
        return of(null); // 未登录时直接完成
      })
    ).toPromise(); // 转为Promise供APP_INITIALIZER识别
}

同时确保你的AuthService中setCredentials函数正确返回Promise：

setCredentials(user: firebase.User): Promise<void> { 
  return user.getIdTokenResult(true).then(idTokenResult => { 
    this.credentials = { 
      userId: idTokenResult.claims.id, 
      role: idTokenResult.claims.role, 
      token: idTokenResult.token, 
    }; 
  }); 
}

二、添加加载图标实现 #

因为APP_INITIALIZER会在Angular渲染根组件前执行，所以我们需要把加载图标放在index.html中作为初始静态内容，初始化完成后再隐藏它：

1. 在index.html中添加加载容器 #

<body>
  <!-- 加载图标容器 -->
  <div id="auth-loader" class="loader-wrapper">
    <div class="spinner"></div>
    <p>正在验证身份...</p>
  </div>

  <app-root></app-root>
</body>

2. 添加加载图标样式（styles.css中） #

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

3. 初始化完成后隐藏加载图标 #

你可以在初始化函数的末尾添加隐藏逻辑，或者在AppComponent的ngOnInit中处理（因为AppComponent会在初始化完成后才渲染）：

方案一：在初始化函数中处理

export function initApp(auth: AuthService, afAuth: AngularFireAuth) {
  return () => 
    afAuth.user.pipe(
      take(1),
      switchMap(user => {
        if (user) {
          return from(auth.setCredentials(user));
        }
        return of(null);
      }),
      tap(() => {
        // 初始化完成，隐藏加载图标
        const loader = document.getElementById('auth-loader');
        if (loader) loader.style.display = 'none';
      })
    ).toPromise();
}

方案二：在AppComponent中处理

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const loader = document.getElementById('auth-loader');
    if (loader) loader.remove(); // 直接移除容器
  }
}

三、关键注意事项 #

• 全程无需依赖localStorage/sessionStorage，完全基于Firebase Auth的身份验证状态流转
• 如果用户未登录，初始化流程会直接完成，加载图标也会正常隐藏，进入应用的未登录状态
• 确保AuthService在AppModule中正确注册，且APP_INITIALIZER的deps数组包含正确的依赖

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