Angular 5 + Firebase验证用户登录状态最佳实践：OnAuthStateChanged vs 令牌检查

嘿，我刚好在Angular + Firebase项目里处理过类似的登录状态校验需求，之前也试过手动存令牌做路由守卫，后来换成Firebase官方推荐的onAuthStateChanged思路后，省心太多了！下面给你拆解下具体的实现方式，这也是我目前在用的最优方案：

1. 先封装一个Auth服务（核心逻辑） #

首先创建一个全局的Auth服务，把Firebase的认证逻辑都封装在这里，这样整个应用的组件和守卫都能复用：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { User } from 'firebase/auth';

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 实时的用户状态Observable，订阅它就能拿到最新的登录状态
  currentUser$: Observable<User | null>;

  constructor(private afAuth: AngularFireAuth) {
    // 划重点：AngularFireAuth的user Observable已经封装了onAuthStateChanged逻辑
    // 不用自己手动写addListener，直接用就行
    this.currentUser$ = this.afAuth.user;
  }

  // 如果你还是需要令牌做其他校验，可以加这个方法
  getCurrentToken(): Observable<string | null> {
    return this.currentUser$.pipe(
      switchMap(user => {
        return user ? user.getIdToken() : of(null);
      })
    );
  }

  // 登出方法也放在这里统一管理
  signOut() {
    return this.afAuth.signOut();
  }
}

2. 路由守卫里用这个服务做校验 #

接下来写路由守卫，用currentUser$来判断用户是否有权限访问路由：

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

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.authService.currentUser$.pipe(
      take(1), // 只取一次当前状态，防止内存泄漏
      map(user => {
        if (user) {
          // 用户已登录，允许进入路由
          return true;
        }
        // 未登录的话跳转到登录页，顺便保存当前路由，登录后可以跳转回来
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return false;
      })
    );
  }
}

然后在路由配置里用上这个守卫：

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  // 其他路由配置...
];

3. 组件里实时获取用户状态 #

如果要在组件里显示用户信息（比如头部导航的用户名、登出按钮），直接订阅currentUser$就行，用Angular的async管道还能自动取消订阅：

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-header',
  template: `
    <div *ngIf="currentUser$ | async as user">
      <span>Hi, {{ user.displayName || user.email }}</span>
      <button (click)="signOut()">Sign Out</button>
    </div>
    <div *ngIf="!(currentUser$ | async)">
      <a routerLink="/login">Sign In</a>
    </div>
  `
})
export class HeaderComponent {
  currentUser$ = this.authService.currentUser$;

  constructor(private authService: AuthService) {}

  signOut() {
    this.authService.signOut();
  }
}

为什么这是最优方案？ #

• 实时可靠：onAuthStateChanged会自动监听所有认证状态变化——比如用户登录、登出、令牌过期自动刷新，这些场景下currentUser$都会同步更新，完全不用你手动处理令牌过期的问题。
• 避免不一致：手动存令牌很容易出现“本地令牌已过期但还没更新”的情况，导致路由守卫误判；用Firebase的原生监听逻辑就不会有这个问题。
• 符合Angular风格：用Observable响应式编程，和Angular的生态完美契合，代码更简洁易维护。

之前你用getToken存令牌的方式，最大的痛点就是没法实时感知令牌的变化，现在换成这个方案后，这些问题都迎刃而解啦！

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