React Native：登录成功后自动执行受保护操作的实现方案

问题背景 #

开发React Native应用时，添加收藏等操作需用户登录后才能执行。当前流程存在问题：用户点击受保护操作（如收藏）后，弹出登录模态窗口，登录成功返回原页面后，需要再次点击按钮才能执行操作；且同一页面可能存在多个不同的受保护操作，需确保登录成功后仅触发用户原本点击的那项操作一次。

需求要点 #

1. 用户未认证时，触发受保护操作会跳转登录页
2. 登录成功并关闭模态窗口后，自动执行用户原本触发的那项操作
3. 操作仅执行一次，已认证用户直接执行操作，不会重复触发
4. 同一页面多个受保护操作需独立触发，互不干扰

现有方案的问题 #

• 传递回调函数：将操作回调作为导航参数传递给登录页，会触发non-serializable警告，且因页面实现深度链接无法忽略该警告
• 监听focus事件：每次页面聚焦且用户已认证时都会执行操作，导致重复触发；若页面有多个受保护操作，所有操作会同时执行

可行解决方案 #

方案1：导航返回值 + 组件临时状态存储 #

通过记录待执行操作的标识，结合导航返回结果判断是否执行操作，无需传递回调，规避序列化警告。

原页面代码示例

import { useNavigation } from '@react-navigation/native';
import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux'; // 假设用Redux获取认证状态

const HomeScreen = () => {
  const navigation = useNavigation();
  const [pendingAction, setPendingAction] = useState(null);
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

  // 实际添加收藏逻辑
  const addFavorite = () => {
    console.log('执行添加收藏操作');
  };

  // 实际分享逻辑（示例其他受保护操作）
  const shareContent = () => {
    console.log('执行分享操作');
  };

  // 统一处理受保护操作
  const handleProtectedAction = (actionType) => {
    if (isAuthenticated) {
      switch (actionType) {
        case 'addFavorite':
          addFavorite();
          break;
        case 'shareContent':
          shareContent();
          break;
        default:
          break;
      }
    } else {
      // 记录待执行操作标识
      setPendingAction(actionType);
      navigation.navigate(NavigationScreens.LoginScreen);
    }
  };

  // 监听登录页返回结果
  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', (e) => {
      const loginResult = e.data?.data;
      // 登录成功且有待执行操作时，触发对应操作并清空标识
      if (loginResult?.loginSuccess && pendingAction) {
        handleProtectedAction(pendingAction);
        setPendingAction(null);
      }
    });

    return unsubscribe;
  }, [navigation, pendingAction, handleProtectedAction]);

  return (
    <View>
      <Button title="添加收藏" onPress={() => handleProtectedAction('addFavorite')} />
      <Button title="分享内容" onPress={() => handleProtectedAction('shareContent')} />
    </View>
  );
};

登录页代码示例

const LoginScreen = ({ navigation }) => {
  const handleLogin = async (credentials) => {
    // 执行登录请求，假设登录成功
    const loginSuccess = await authService.login(credentials);
    if (loginSuccess) {
      // 返回登录成功标识给原页面
      navigation.goBack({ loginSuccess: true });
    }
  };

  return (
    // 登录表单组件，省略具体实现
  );
};

方案2：全局状态管理（如Redux）存储待执行操作 #

通过全局状态存储待执行操作标识，登录成功后自动触发对应操作，适合多页面有受保护操作的大型项目。

1. 定义Redux Slice

import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    isAuthenticated: false,
    pendingAction: null, // 存储待执行操作标识
  },
  reducers: {
    // 登录成功动作
    loginSuccess: (state) => {
      state.isAuthenticated = true;
    },
    // 设置待执行操作
    setPendingAction: (state, action) => {
      state.pendingAction = action.payload;
    },
    // 清空待执行操作
    clearPendingAction: (state) => {
      state.pendingAction = null;
    },
  },
});

export const { loginSuccess, setPendingAction, clearPendingAction } = authSlice.actions;
export default authSlice.reducer;

2. 原页面代码示例

import { useDispatch, useSelector } from 'react-redux';
import { useNavigation } from '@react-navigation/native';
import { useEffect } from 'react';
import { setPendingAction, clearPendingAction } from '../slices/authSlice';

const HomeScreen = () => {
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const { isAuthenticated, pendingAction } = useSelector(state => state.auth);

  const addFavorite = () => {
    console.log('执行添加收藏操作');
    dispatch(clearPendingAction()); // 执行后清空标识
  };

  const shareContent = () => {
    console.log('执行分享操作');
    dispatch(clearPendingAction());
  };

  const handleProtectedAction = (actionType) => {
    if (isAuthenticated) {
      actionType === 'addFavorite' ? addFavorite() : shareContent();
    } else {
      dispatch(setPendingAction(actionType));
      navigation.navigate(NavigationScreens.LoginScreen);
    }
  };

  // 监听认证状态和待执行操作，登录成功后自动触发
  useEffect(() => {
    if (isAuthenticated && pendingAction) {
      handleProtectedAction(pendingAction);
    }
  }, [isAuthenticated, pendingAction, handleProtectedAction]);

  return (
    <View>
      <Button title="添加收藏" onPress={() => handleProtectedAction('addFavorite')} />
      <Button title="分享内容" onPress={() => handleProtectedAction('shareContent')} />
    </View>
  );
};

3. 登录页代码示例

import { useDispatch } from 'react-redux';
import { loginSuccess } from '../slices/authSlice';

const LoginScreen = ({ navigation }) => {
  const dispatch = useDispatch();

  const handleLogin = async (credentials) => {
    const loginSuccess = await authService.login(credentials);
    if (loginSuccess) {
      dispatch(loginSuccess());
      navigation.goBack();
    }
  };

  return (
    // 登录表单组件，省略具体实现
  );
};

方案优势说明 #

• 方案1：无需依赖全局状态管理，适合小型项目；操作标识存储在组件内部，避免导航参数序列化问题；仅在登录成功返回时触发一次操作，不会重复执行。
• 方案2：全局统一管理待执行操作，适合多页面有受保护操作的场景；逻辑集中，无需每个页面单独监听导航返回事件。

内容的提问来源于stack exchange，提问作者Cristian Flórez