如何在Firebase中仅允许指定Google用户访问仪表盘？

要实现仅允许3个特定Google用户登录后访问仪表盘，需要结合前端登录校验、路由防护，同时如果涉及数据库操作，必须配置数据库规则——前端校验是第一道关卡，数据库规则是服务器端的安全防线（防止前端校验被绕过）。

步骤1：收集允许访问的用户UID #

Google用户的displayName可能重复，而Firebase的用户UID是唯一且不可篡改的，所以白名单必须用UID。你可以先让这3个用户登录一次，从控制台或登录成功的result.user.uid里获取他们的UID，整理成白名单数组：

const allowedUids = ["用户1的UID", "用户2的UID", "用户3的UID"];

步骤2：修改登录代码，加入白名单校验 #

在登录成功后立即校验用户UID是否在白名单内，不在则直接登出并拒绝访问：

const signInWithGoogle = async () => {
  try {
    const result = await signInWithPopup(auth, provider);
    const userId = result.user.uid;
    const allowedUids = ["用户1的UID", "用户2的UID", "用户3的UID"];
    
    if (allowedUids.includes(userId)) {
      const username = result.user.displayName;
      addUser(username, userId);
      navigate('/todos');
    } else {
      await signOut(auth);
      alert("你没有访问权限");
      navigate('/login');
    }
  } catch (err) {
    console.log(err);
  }
}

步骤3：路由/页面级别的权限防护 #

就算用户通过手动输入URL跳转到仪表盘，也要在页面组件里校验当前用户权限。以React为例，在/todos组件中添加监听：

import { useEffect } from 'react';
import { onAuthStateChanged, signOut } from 'firebase/auth';
import { auth } from './firebase-config';
import { useNavigate } from 'react-router-dom';

function Todos() {
  const navigate = useNavigate();
  
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      const allowedUids = ["用户1的UID", "用户2的UID", "用户3的UID"];
      if (!user || !allowedUids.includes(user.uid)) {
        signOut(auth);
        navigate('/login');
      }
    });
    // 组件卸载时取消监听
    return unsubscribe;
  }, [auth, navigate]);
  
  // 组件其余逻辑...
}

步骤4：配置数据库规则（关键！） #

如果仪表盘需要读取/写入Firebase数据库（Firestore或实时数据库），必须配置服务器端规则，限制只有白名单内的UID才能操作数据。以Firestore为例，规则如下：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 限制所有文档仅允许白名单用户读写
    match /{document=**} {
      allow read, write: if request.auth != null && request.auth.uid in ["用户1的UID", "用户2的UID", "用户3的UID"];
    }
  }
}

实时数据库的规则类似：

{
  "rules": {
    ".read": "auth != null && auth.uid in ['用户1的UID', '用户2的UID', '用户3的UID']",
    ".write": "auth != null && auth.uid in ['用户1的UID', '用户2的UID', '用户3的UID']"
  }
}

总结 #

• 前端校验和路由防护是为了给用户友好的访问拦截体验；
• 数据库规则是必须的，因为前端代码可以被篡改绕过，服务器端规则是数据安全的最后保障。

内容的提问来源于stack exchange，提问作者Luka Miljković