Angular+Firebase页面刷新重认证：解决刷新后需重新登录问题

嘿，这个问题我之前开发Angular + Firebase应用时也碰到过！其实Firebase Auth已经自动帮我们处理了本地存储的会话持久化，我们只需要在Angular里正确监听用户状态变化，再把状态传递给路由守卫就行。下面一步步来解决：

Firebase Auth的authState Observable会自动在页面加载时尝试从本地存储恢复用户会话，我们只需要在AuthService里订阅这个Observable，就能实时获取用户登录状态（包括刷新页面后的状态）。

修改你的auth.service.ts：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';

@Injectable()
export class AuthService {
  // 用Observable保存用户状态，路由守卫可以直接订阅它
  user$: Observable<firebase.User | null>;

  constructor(private afAuth: AngularFireAuth) {
    // 关键：订阅Firebase的authState，自动处理本地存储重认证
    this.user$ = this.afAuth.authState;
  }

  // 你的注册方法保持不变
  register(email: string, password: string) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password);
  }

  // 你的登录方法保持不变
  login(email: string, password: string) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password);
  }

  logout() {
    return this.afAuth.auth.signOut();
  }

  // 方便守卫快速判断登录状态的辅助方法
  isLoggedIn(): Observable<boolean> {
    return this.user$.map(user => !!user);
  }
}

现在我们可以在auth-guard.service.ts里订阅AuthService的user$ Observable，来判断用户是否有权限访问目标路由：

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

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 订阅用户状态，判断是否登录
    return this.authService.user$.map(user => {
      if (user) {
        // 已登录，允许访问路由
        return true;
      }
      // 未登录，跳转到登录页并保存当前路由，方便登录后跳转回来
      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
      return false;
    }).first(); // 用first()确保Observable完成，避免路由一直处于等待状态
  }
}

1. 在AppModule里注册AuthService和AuthGuard，并初始化Firebase：

import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AuthService } from './auth.service';
import { AuthGuard } from './auth-guard.service';

// 你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    // 其他模块...
  ],
  providers: [AuthService, AuthGuard],
  // ...
})
export class AppModule { }

2. 在路由配置里给需要保护的路由添加canActivate: [AuthGuard]：

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

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  // 其他需要保护的路由...
];

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

• 不需要手动操作localStorage，Firebase Auth会自动管理会话的持久化（默认是local模式，即刷新页面不会丢失登录状态）。
• 确保你的angularfire2版本和Angular 1.5.5兼容（对应angularfire2 4.x版本左右），避免出现API不匹配的问题。
• 如果刷新后还是无法恢复登录状态，检查Firebase控制台的Auth设置里，是否开启了邮箱/密码登录方式，并且应用的域名在授权域名列表里。

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