React页面刷新时重定向至错误路由问题求助

你的问题核心在于：页面刷新或手动输入URL时，Redux认证状态未完成初始化，导致路由守卫错误判定用户权限，从而重定向到profile页面。以下是具体排查和修复步骤：

1. 修正ProtectedRoute的状态判断逻辑 #

路由守卫在认证状态加载完成前，不要执行重定向操作，先等待状态就绪：

// ProtectedRoute.js
import { useSelector } from 'react-redux';
import { Navigate, Outlet } from 'react-router-dom';

const ProtectedRoute = ({ allowedRoles }) => {
  const { user, isLoading } = useSelector(state => state.auth);

  // 状态加载中时，显示加载UI（避免过早重定向）
  if (isLoading) {
    return <div>加载中...</div>; // 替换成你的加载组件
  }

  // 用户未登录，跳转登录页
  if (!user) {
    return <Navigate to="/login" replace />;
  }

  // 角色不匹配，跳转profile
  if (!allowedRoles.includes(user.role)) {
    return <Navigate to="/profile" replace />;
  }

  return <Outlet />;
};

export default ProtectedRoute;

2. 完善Redux认证状态的初始化 #

确保应用启动时，从localStorage读取并验证JWT，同时维护isLoading状态：

// authSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import authService from './authService';

// 从localStorage获取缓存的用户信息
const savedUser = JSON.parse(localStorage.getItem('user'));

const initialState = {
  user: savedUser || null,
  isLoading: true, // 初始化时标记为加载中
  isError: false,
  isSuccess: false,
  message: '',
};

// 异步验证JWT有效性，获取最新用户信息
export const verifyToken = createAsyncThunk('auth/verifyToken', async (_, thunkAPI) => {
  try {
    return await authService.verifyToken();
  } catch (error) {
    const message = (error.response?.data?.message || error.message || error.toString());
    return thunkAPI.rejectWithValue(message);
  }
});

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    reset: (state) => {
      state.isLoading = false;
      state.isError = false;
      state.isSuccess = false;
      state.message = '';
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(verifyToken.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(verifyToken.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.user = action.payload;
        localStorage.setItem('user', JSON.stringify(action.payload));
      })
      .addCase(verifyToken.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.payload;
        state.user = null;
        localStorage.removeItem('user');
      });
  },
});

export const { reset } = authSlice.actions;
export default authSlice.reducer;

然后在根组件中触发初始化验证：

// App.js
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { verifyToken } from './features/auth/authSlice';
// 其他导入...

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(verifyToken());
  }, [dispatch]);

  // 路由配置...
}

3. 检查路由配置的正确性 #

确保路由嵌套和角色权限配置匹配，避免路由顺序冲突：

// App.js路由部分
<Routes>
  <Route path="/login" element={<Login />} />
  {/* 员工和管理员都能访问的路由 */}
  <Route element={<ProtectedRoute allowedRoles={['employee', 'admin']} />}>
    <Route path="/profile" element={<Profile />} />
    <Route path="/lottery" element={<Lottery />} />
  </Route>
  {/* 仅管理员可访问的路由 */}
  <Route element={<ProtectedRoute allowedRoles={['admin']} />}>
    <Route path="/admin-lottery" element={<AdminLottery />} />
  </Route>
  {/* 默认路由重定向 */}
  <Route path="*" element={<Navigate to="/profile" replace />} />
</Routes>

4. 验证JWT与用户角色存储 #

• 检查localStorage中user字段是否包含完整的role值，避免刷新时读取到不完整数据。
• 确保后端返回的用户信息中角色字段正确，且前端验证逻辑无误。

内容的提问来源于stack exchange，提问作者Yassou Sk