基于Firebase为ReactJS仪表盘配置Admin与Editor角色权限

核心思路 #

用Firebase Auth处理用户认证，Firestore存储用户角色信息，通过安全规则限制权限，确保默认注册用户为Editor，且Admin用户唯一且拥有更高权限。

1. Firestore集合初始化 #

首先在Firestore创建users集合，每个文档以用户UID作为ID，包含role（editor/admin）和email字段，用于存储角色信息。

2. 注册时自动分配Editor角色 #

用户通过邮箱密码注册后，立即在Firestore写入其角色为editor，确保新用户默认拥有编辑权限：

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { getFirestore, doc, setDoc } from "firebase/firestore";

const auth = getAuth();
const db = getFirestore();

const handleRegister = async (email, password) => {
  try {
    // 创建Auth用户
    const { user } = await createUserWithEmailAndPassword(auth, email, password);
    
    // 写入Firestore，默认赋予Editor角色
    await setDoc(doc(db, "users", user.uid), {
      role: "editor",
      email: user.email
    });

    // 注册成功后的逻辑：跳转仪表盘等
  } catch (err) {
    console.error("注册失败:", err.message);
    // 给用户展示错误提示
  }
};

3. 创建唯一Admin用户 #

为了避免Admin权限被滥用，推荐手动创建（最安全）：

1. 登录Firebase控制台，在Auth模块手动创建一个用户（使用你的专属邮箱）；
2. 进入Firestore的users集合，新建文档，ID填该用户的UID，添加字段role: "admin"和email: "你的邮箱"。

如果需要自动化创建，可写一次性脚本（仅在本地/受控环境运行，切勿部署到前端）：

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { getFirestore, doc, setDoc } from "firebase/firestore";

const auth = getAuth();
const db = getFirestore();

const createAdmin = async (adminEmail, adminPwd) => {
  try {
    // 可选：先检查是否已有Admin，避免重复创建
    // 省略查询逻辑，按需添加
    
    const { user } = await createUserWithEmailAndPassword(auth, adminEmail, adminPwd);
    await setDoc(doc(db, "users", user.uid), {
      role: "admin",
      email: adminEmail
    });
    console.log("Admin用户创建完成");
  } catch (err) {
    console.error("创建Admin失败:", err.message);
  }
};

// 替换为你的邮箱和强密码
createAdmin("admin@yourdomain.com", "StrongAdminPwd123!");

4. React组件中校验权限 #

在仪表盘组件中，监听用户登录状态，从Firestore获取角色，根据角色展示对应功能：

import { useEffect, useState } from "react";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getFirestore, doc, getDoc, setDoc } from "firebase/firestore";

const Dashboard = () => {
  const [userRole, setUserRole] = useState(null);
  const auth = getAuth();
  const db = getFirestore();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) {
        const userDocRef = doc(db, "users", user.uid);
        const userDoc = await getDoc(userDocRef);
        
        if (userDoc.exists()) {
          setUserRole(userDoc.data().role);
        } else {
          // 处理异常情况：用户存在但角色文档缺失，默认设为Editor
          await setDoc(userDocRef, { role: "editor", email: user.email });
          setUserRole("editor");
        }
      } else {
        setUserRole(null);
      }
    });

    return unsubscribe;
  }, [auth, db]);

  return (
    <div className="dashboard">
      <h1>系统仪表盘</h1>
      {userRole === "editor" && <p>当前权限：编辑者</p>}
      {userRole === "admin" && (
        <>
          <p>当前权限：管理员</p>
          {/* 管理员专属操作 */}
          <button className="admin-btn">管理所有用户</button>
          <button className="admin-btn">系统设置</button>
        </>
      )}
    </div>
  );
};

export default Dashboard;

5. Firestore安全规则（必加！） #

设置安全规则，防止普通用户篡改角色，确保只有Admin能修改用户权限：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      // 用户只能读取自己的角色信息
      allow read: if request.auth != null && request.auth.uid == userId;
      // 只有Admin用户能修改角色文档
      allow write: if request.auth != null && 
        get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == "admin";
    }
  }
}

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