设置Firebase安全规则后，React Native管理员登录的客户端代码实现

1. 基础配置确认 #

确保你已经在React Native项目中安装并配置了Firebase相关依赖：

# 安装核心依赖
npm install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore
# iOS项目需额外执行
cd ios && pod install && cd ..

在项目根目录创建firebase.js完成初始化：

import firebase from '@react-native-firebase/app';
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

// 替换为你的Firebase项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export { firebase, auth, firestore };

2. 登录逻辑实现 #

编写登录组件，实现邮箱密码登录，并在登录后验证用户是否为指定邮箱：

import React, { useState } from 'react';
import { View, TextInput, Button, Text, Alert } from 'react-native';
import { auth } from './firebase';

// 替换为安全规则中指定的邮箱
const ALLOWED_EMAIL = "your-allowed-email@example.com";

const LoginScreen = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      // 执行Firebase邮箱密码登录
      const userCredential = await auth().signInWithEmailAndPassword(email, password);
      const user = userCredential.user;

      // 验证登录用户是否为指定邮箱
      if (user.email !== ALLOWED_EMAIL) {
        await auth().signOut();
        Alert.alert('权限不足', '仅指定用户可登录');
        return;
      }

      // 登录成功，跳转到主页面
      console.log('登录成功：', user.email);
      // 这里添加页面跳转逻辑，比如navigation.navigate('Home')
    } catch (error) {
      let errorMessage = '登录失败，请检查账号密码';
      if (error.code === 'auth/user-not-found') {
        errorMessage = '该账号不存在';
      } else if (error.code === 'auth/wrong-password') {
        errorMessage = '密码错误';
      }
      Alert.alert('登录错误', errorMessage);
    }
  };

  return (
    <View style={{ padding: 20, gap: 15 }}>
      <TextInput
        placeholder="邮箱"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      <TextInput
        placeholder="密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="登录" onPress={handleLogin} />
    </View>
  );
};

export default LoginScreen;

3. 全局用户状态监听 #

在App入口添加全局auth状态监听，防止用户通过其他方式绕过登录验证：

import React, { useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './LoginScreen';
import HomeScreen from './HomeScreen';
import { auth } from './firebase';
import { Alert } from 'react-native';

const ALLOWED_EMAIL = "your-allowed-email@example.com";
const Stack = createStackNavigator();

const App = () => {
  useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged(async (user) => {
      if (user) {
        // 已登录状态下再次验证邮箱
        if (user.email !== ALLOWED_EMAIL) {
          await auth().signOut();
          Alert.alert('权限不足', '仅指定用户可登录');
        }
      }
    });

    // 组件卸载时取消监听
    return unsubscribe;
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

4. Firestore操作示例（配合安全规则） #

在主页面编写Firestore读写操作，此时只有指定用户能成功执行：

import React, { useState, useEffect } from 'react';
import { View, Text, Button, Alert } from 'react-native';
import { firestore } from './firebase';

const HomeScreen = () => {
  const [data, setData] = useState(null);

  // 读取Firestore数据
  const fetchData = async () => {
    try {
      const doc = await firestore().collection('test').doc('sample').get();
      if (doc.exists) {
        setData(doc.data());
      } else {
        setData('无数据');
      }
    } catch (error) {
      Alert.alert('读取失败', error.message);
    }
  };

  // 写入Firestore数据
  const writeData = async () => {
    try {
      await firestore().collection('test').doc('sample').set({
        content: '测试内容',
        timestamp: new Date()
      });
      Alert.alert('写入成功');
      fetchData();
    } catch (error) {
      Alert.alert('写入失败', error.message);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <View style={{ padding: 20, gap: 15 }}>
      <Text>当前用户：{firestore().app.auth().currentUser?.email}</Text>
      <Text>Firestore数据：{JSON.stringify(data)}</Text>
      <Button title="重新读取" onPress={fetchData} />
      <Button title="写入测试数据" onPress={writeData} />
    </View>
  );
};

export default HomeScreen;

关键说明 #

• 安全规则中已经限制了只有指定邮箱的用户能访问Firestore，前端代码中额外添加登录验证是为了提前拦截不符合条件的用户，避免不必要的Firestore请求报错。
• 全局状态监听可以防止用户通过本地缓存的登录状态绕过验证，确保每次用户状态变更时都进行邮箱校验。

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