如何在Angular 13中基于Firebase实现管理员角色权限守卫？

你的代码存在几个关键问题，导致管理员页面授权逻辑失效：

• canActivate方法没有正确返回Observable<boolean>，反而错误地在方法内部定义了一个getter函数
• 没有实现实际的权限校验逻辑，也未处理权限不满足时的路由跳转

以下是修复后的完整代码：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { CanActivate, Router } from '@angular/router';
import { Observable, map, take } from 'rxjs';
import { UserService } from '../user.service';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AdminAuthGuard implements CanActivate {

  constructor(
    public db: AngularFirestore,
    private userService: UserService,
    public auth: AuthService,
    private router: Router
  ) { }

  canActivate(): Observable<boolean> {
    // 假设AuthService中存在返回当前用户状态的Observable（如user$）
    return this.auth.user$.pipe(
      take(1), // 只取一次值避免内存泄漏
      map(user => {
        // 校验用户是否存在且为管理员
        const isAdmin = user?.isAdmin === true;
        if (!isAdmin) {
          // 非管理员跳转至首页或无权限页面
          this.router.navigate(['/']);
        }
        return isAdmin;
      })
    );
  }
}

关键修复点说明： #

• 移除canActivate内部错误的getter定义，改为返回合法的Observable<boolean>
• 使用RxJS操作符pipe、take和map处理用户状态流，确保仅订阅一次用户数据
• 增加权限不满足时的路由跳转逻辑，引导非管理员用户离开受限页面
• 假设AuthService中存在user$ Observable用于实时获取当前用户信息（若你的服务中是其他命名，如currentUser$，请对应修改）

额外注意事项： #

1. 确保AuthService正确暴露当前用户的Observable，示例代码如下：

// AuthService中的示例实现
user$: Observable<any>;

constructor(private afAuth: AngularFireAuth) {
  this.user$ = this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        // 从Firestore获取包含isAdmin字段的用户详情
        return this.db.doc(`users/${user.uid}`).valueChanges();
      } else {
        return of(null);
      }
    })
  );
}

2. 在路由配置中正确使用该守卫：

const routes: Routes = [
  { 
    path: 'admin', 
    component: AdminDashboardComponent, 
    canActivate: [AdminAuthGuard] 
  }
];

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