React Native Redux Firebase iOS应用：实现账号密码保存与自动登录

嘿，我来帮你搞定这个自动登录的需求！其实你完全不需要手动保存用户名和密码（这反而会带来严重的安全风险），Firebase Auth本身就提供了会话持久化的能力，再结合Redux就能轻松实现自动连接功能。下面是具体的实现步骤：

Firebase Auth在iOS平台默认采用LOCAL持久化策略——也就是说，用户登录成功后，即使关闭App再重新打开，Firebase会自动保留用户的认证会话，不需要你手动存储密码。这是最安全也最省心的方式。

你需要在App初始化的时候，检查当前的Firebase用户状态，然后把这个状态同步到你的Redux store里，这样App就能自动判断是显示登录页还是已连接页面。

步骤分解： #

• 首先，写一个Redux action来检查用户认证状态：

// actions/authActions.js
export const checkAuthStatus = () => async (dispatch) => {
  try {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        // 用户已登录，更新store中的userConnected为true
        dispatch({ type: 'SET_USER_CONNECTED', payload: true });
        // 还可以同步用户信息到store，比如user.email、user.uid等
        dispatch({ type: 'SET_USER_INFO', payload: { email: user.email } });
      } else {
        // 用户未登录，设置userConnected为false
        dispatch({ type: 'SET_USER_CONNECTED', payload: false });
      }
    });
  } catch (error) {
    console.error('检查认证状态失败:', error);
    dispatch({ type: 'SET_USER_CONNECTED', payload: false });
  }
};

• 然后在你的App.js中，在组件挂载时触发这个action：

// App.js
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { checkAuthStatus } from './actions/authActions';
import Login from './components/Login';
import Connected from './components/Connected';
import styles from './styles';

const App = () => {
  const dispatch = useDispatch();
  const userConnected = useSelector(state => state.data.userConnected);

  useEffect(() => {
    // 组件挂载后立即检查用户认证状态
    dispatch(checkAuthStatus());
  }, [dispatch]);

  return (
    <>
      {!userConnected && <View style={styles.container1}><Login /></View>}
      {userConnected && <View style={styles.container1}><Connected /></View>}
    </>
  );
};

export default App;

如果你想让用户下次打开App时自动填充用户名（邮箱），可以用@react-native-async-storage/async-storage来存储用户的邮箱，但绝对不要存储明文密码——这会带来严重的安全隐患。

示例代码： #

登录成功后存储邮箱：

// 在登录成功的action里
import AsyncStorage from '@react-native-async-storage/async-storage';

export const loginUser = (email, password) => async (dispatch) => {
  try {
    const userCredential = await firebase.auth().signInWithEmailAndPassword(email, password);
    // 登录成功后存储邮箱到AsyncStorage
    await AsyncStorage.setItem('userEmail', email);
    dispatch({ type: 'SET_USER_CONNECTED', payload: true });
  } catch (error) {
    console.error('登录失败:', error);
    // 处理登录错误
  }
};

在Login组件中预填邮箱：

// Login.js
import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Login = () => {
  const [email, setEmail] = useState('');

  useEffect(() => {
    // 组件挂载时读取存储的邮箱
    const getStoredEmail = async () => {
      const storedEmail = await AsyncStorage.getItem('userEmail');
      if (storedEmail) {
        setEmail(storedEmail);
      }
    };
    getStoredEmail();
  }, []);

  // 登录逻辑...
};

• 永远不要存储用户的明文密码，哪怕是加密后的也尽量避免——Firebase的会话持久化已经足够安全。
• 如果需要存储敏感信息（比如用户的认证令牌），建议使用react-native-keychain这样的安全存储库，它会利用iOS的Keychain服务来加密存储数据。

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