React中使用useEffect实现条件重定向异常问题排查

问题根源分析 #

你的代码出现持续重定向的核心原因是：

1. 组件初始加载时user状态默认为null，此时checkRedirect会立刻触发登录页重定向，并将hasNavigatedRef.current设为true
2. 当App.jsx中通过API/localStorage获取到已登录用户数据后，user状态更新，useEffect再次调用checkRedirect，但hasNavigatedRef.current已经是true，第一个判断跳过；同时初始的登录页重定向已经执行，后续的未验证重定向逻辑会被打断，导致整体逻辑混乱
3. 两个if判断无互斥逻辑，可能引发多次跳转冲突

修正方案 #

步骤1：在Auth Store中添加加载状态

先在你的auth状态管理中新增isLoading字段（初始值为true），用于标记用户数据是否加载完成。

步骤2：修改App.jsx中的用户初始化逻辑

useEffect(() => {
  dispatch(authActions.setLoading(true));
  const token = Cookies.get('authToken');
  const user = JSON.parse(localStorage.getItem('user'));

  if (token && user) {
    dispatch(authActions.setUser(user));
    dispatch(authActions.setLoading(false));
  } else if (token) {
    axios.get(`${API_URL}/me`, {
      headers: {
        Authorization: `Bearer ${token}`
      },
    }).then(res => {
      dispatch(authActions.setUser(res.data));
      localStorage.setItem('user', JSON.stringify(res.data)); // 同步到localStorage避免重复请求
      dispatch(authActions.setLoading(false));
    }).catch(err => {
      console.error(err);
      dispatch(authActions.removeUser());
      Cookies.remove('authToken');
      localStorage.removeItem('user');
      dispatch(authActions.setLoading(false));
    });
  } else {
    dispatch(authActions.setLoading(false));
  }
}, [dispatch]);

步骤3：重构checkRedirect函数

const checkRedirect = () => {
  // 数据加载中不执行重定向逻辑
  if (isLoading) return;

  // 用户未登录的情况
  if (user === null) {
    if (!hasNavigatedRef.current) {
      toast('🦄 You need to Login to create a community');
      navigate("/login");
      hasNavigatedRef.current = true;
    }
    return; // 未登录时直接终止，不执行后续判断
  }

  // 用户已登录但未验证的情况
  if (!user.isEmailConfirmed) {
    if (!hasNavigatedRef.current) {
      toast('🦄 You need to be Verified to create a community');
      navigate('/pr');
      hasNavigatedRef.current = true;
    }
  }
};

useEffect(() => {
  checkRedirect();
}, [user, isLoading]); // 添加isLoading为依赖，确保加载完成后再判断

步骤4：重置导航标记

当用户从登录页返回后，重置hasNavigatedRef，保证后续逻辑正常执行：

useEffect(() => {
  // 用户登录状态恢复时，重置导航标记
  if (user !== null) {
    hasNavigatedRef.current = false;
  }
}, [user]);

核心优化点 #

• 增加加载状态，避免在用户数据未就绪时提前执行重定向
• 调整判断顺序，未登录逻辑优先执行并直接终止后续流程
• 给未验证的重定向也加上导航标记，避免重复跳转
• 同步用户数据到localStorage，减少不必要的API请求

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