React登录后手动访问受保护路由仍重定向至登录页问题排查

页面刷新（手动粘贴URL属于页面刷新场景）时，Redux状态会重置为初始值isUserLogin: false，而ProtectedPage组件挂载时会立即检测到未登录状态并触发重定向——此时代码还没来得及从localStorage中恢复登录状态，导致错误重定向。

1. 修改Redux切片，从localStorage初始化状态 #

直接在Redux切片的初始状态中读取localStorage的用户信息，确保页面刷新时状态能同步：

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

// 从localStorage读取并返回初始状态
const getInitialAuthState = () => {
  try {
    const userInfoStr = localStorage.getItem('userInfo');
    if (userInfoStr) {
      const userInfo = JSON.parse(userInfoStr);
      return {
        isUserLogin: true,
        userStatus: userInfo.userStatus || ''
      };
    }
  } catch (err) {
    console.error('读取本地用户信息失败:', err);
  }
  // 默认未登录状态
  return { isUserLogin: false, userStatus: '' };
};

export const userAuthSlice = createSlice({
  name: 'userAuth',
  initialState: getInitialAuthState(),
  reducers: {
    loginUser: (state, action: PayloadAction<string>) => {
      state.isUserLogin = true;
      state.userStatus = action.payload;
    },
    logoutUser: (state) => {
      localStorage.clear();
      state.isUserLogin = false;
      state.userStatus = '';
    }
  }
});

export const { loginUser, logoutUser } = userAuthSlice.actions;
export default userAuthSlice.reducer;

2. 优化ProtectedPage组件（可选） #

添加加载状态，避免状态恢复过程中误重定向：

const ProtectedPage: React.FC<ProtectedPageProps> = ({ Component }: ProtectedPageProps) => {
    const navigate = useNavigate();
    const { isUserLogin } = useSelector((state: RootState) => state.userAuth);
    const hasLocalUserInfo = !!localStorage.getItem('userInfo');

    useEffect(() => {
        // 只有当Redux未登录且localStorage也无用户信息时，才重定向
        if (!isUserLogin && !hasLocalUserInfo) {
            navigate('/login');
        }
    }, [isUserLogin, hasLocalUserInfo]);

    // 状态恢复中显示加载
    if (!isUserLogin && hasLocalUserInfo) {
        return <div>加载中...</div>;
    }

    return <>{isUserLogin ? Component : null}</>;
};

export default ProtectedPage;

内容的提问来源于stack exchange，提问作者Lord Konadu Kweku