Angular 6+AngularFireAuth：页面渲染前检查用户登录状态的最佳实践

这个闪烁问题的根源很明确：Firebase Auth在页面初始化时需要一点时间验证本地的用户会话，所以authState一开始会发出null值，导致你的模板先渲染“登录”按钮，等验证完成拿到用户信息后才切换到“登出”按钮。下面是几个经过验证的解决方案，帮你彻底解决这个问题：

1. 增加加载状态跟踪，避免初始UI跳转 #

首先在你的AuthService里添加一个加载状态的Observable，用来标记Auth会话验证的完成状态：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable, of, BehaviorSubject } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { User } from './user';

@Injectable({ providedIn: 'root' })
export class AuthService {
  user: Observable<User>;
  // 新增：跟踪加载状态，初始为true
  private _isLoading = new BehaviorSubject<boolean>(true);
  isLoading = this._isLoading.asObservable();

  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, private router: Router) {
    this.user = this.afAuth.authState.pipe(
      switchMap(user => {
        // Auth状态返回后，标记加载完成
        this._isLoading.next(false);
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return of(null);
        }
      })
    )
  }

  // 其余方法保持不变...
}

然后修改导航组件的模板，先显示加载状态（比如一个Spinner），等Auth状态确认后再渲染登录/登出按钮：

<div *ngIf="auth.isLoading | async; then loading else authContent"></div>

<ng-template #loading>
  <li class="nav-item d-none d-md-inline-block pl-2 pr-0">
    <span class="btn btn-sm btn-secondary u-btn-pill">加载中...</span>
  </li>
</ng-template>

<ng-template #authContent>
  <div *ngIf="auth.user | async; then loggedIn else loggedOut"></div>
  <ng-template #loggedOut>
    <li class="nav-item d-none d-md-inline-block pl-2 pr-0">
      <a class="btn btn-sm btn-primary u-btn-primary u-btn-pill transition-3d-hover" href="/login">
        Login
      </a>
    </li>
  </ng-template>
  <ng-template #loggedIn>
    <li class="nav-item d-none d-md-inline-block pl-2 pr-0">
      <a class="btn btn-sm btn-primary u-btn-primary u-btn-pill transition-3d-hover" (click)="auth.signOut()">
        Logout
      </a>
    </li>
  </ng-template>
</ng-template>

2. 使用路由守卫预加载用户状态 #

如果你的应用有需要登录才能访问的路由，用Auth Guard可以确保路由激活前就拿到用户状态，同时间接避免导航栏闪烁。创建一个AuthGuard：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> {
    return this.auth.user.pipe(
      take(1), // 只取一次最新值，避免内存泄漏
      map(user => {
        const isAuthenticated = !!user;
        // 如果未登录且访问的不是登录页，跳转到登录页
        if (!isAuthenticated && state.url !== '/login') {
          this.router.navigate(['/login']);
        }
        return true; // 允许路由激活，你也可以根据需求返回isAuthenticated
      })
    );
  }
}

然后在路由配置中使用这个守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './core/auth.guard';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这样路由会等待用户状态加载完成后再激活，导航栏也能在页面渲染前拿到正确的状态。

3. 可选：隐藏初始UI直到状态就绪 #

如果你不想显示加载动画，也可以直接在加载过程中隐藏导航按钮区域：

<div *ngIf="!(auth.isLoading | async)">
  <div *ngIf="auth.user | async; then loggedIn else loggedOut"></div>
  <ng-template #loggedOut>
    <li class="nav-item d-none d-md-inline-block pl-2 pr-0">
      <a class="btn btn-sm btn-primary u-btn-primary u-btn-pill transition-3d-hover" href="/login">
        Login
      </a>
    </li>
  </ng-template>
  <ng-template #loggedIn>
    <li class="nav-item d-none d-md-inline-block pl-2 pr-0">
      <a class="btn btn-sm btn-primary u-btn-primary u-btn-pill transition-3d-hover" (click)="auth.signOut()">
        Logout
      </a>
    </li>
  </ng-template>
</div>

总结最佳实践 #

• 始终跟踪Auth状态的加载过程，避免初始null值导致的UI闪烁
• 用路由守卫确保路由激活前用户状态已就绪
• 在模板中根据加载状态显示合适的UI（加载动画或隐藏元素）
• 确保Firebase初始化配置正确，让Auth自动处理本地会话验证

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