React手动输入地址时Protected Route失效问题求助

问题根源 #

页面刷新时，Redux Store的初始状态中isAuthenticated为false，而ProtectedRoute组件会在App组件的useEffect触发的认证请求完成之前就执行权限判断，导致误重定向到首页。

解决方案 #

1. 给ProtectedRoute添加加载状态判断 #

修改ProtectedRoute组件，在认证状态未确定时（即请求加载中）显示加载组件，而非直接重定向：

import { useSelector } from 'react-redux';
import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const { isAuthenticated, isLoading } = useSelector(state => state.auth);

  // 加载中时渲染加载状态，避免提前重定向
  if (isLoading) {
    return <div>加载中...</div>; // 替换为你的项目加载组件（如Spinner）
  }

  return isAuthenticated ? children : <Navigate to="/" />;
};

export default ProtectedRoute;

2. 在Redux中维护认证加载状态 #

确保你的Auth Slice（以Redux Toolkit为例）中包含isLoading状态，并在异步请求的不同阶段更新它：

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

// 异步获取用户数据的action
export const getUserDataAsync = createAsyncThunk(
  'auth/getUserData',
  async () => {
    // 这里替换为你的用户信息API请求，需携带认证凭证（如cookie/token）
    const res = await fetch('/api/user/profile', { credentials: 'include' });
    return res.json();
  }
);

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
    isAuthenticated: false,
    isLoading: true, // 初始设为true，因为页面刷新后需要先执行认证检查
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getUserDataAsync.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(getUserDataAsync.fulfilled, (state, action) => {
        state.isLoading = false;
        state.user = action.payload;
        state.isAuthenticated = true;
      })
      .addCase(getUserDataAsync.rejected, (state) => {
        state.isLoading = false;
        state.isAuthenticated = false;
        state.user = null;
      });
  },
});

export default authSlice.reducer;

3. 确保App组件正确触发认证请求 #

在App组件的useEffect中仅挂载时触发认证请求，依赖项设置正确：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { Routes, Route } from 'react-router-dom';
import ProtectedRoute from './components/ProtectedRoute';
import Home from './pages/Home';
import Profile from './pages/Profile';
import { getUserDataAsync } from './features/auth/authSlice';

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

  useEffect(() => {
    // 页面加载时立即执行认证检查
    dispatch(getUserDataAsync());
  }, [dispatch]);

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route 
        path="/profile" 
        element={
          <ProtectedRoute>
            <Profile />
          </ProtectedRoute>
        } 
      />
    </Routes>
  );
}

export default App;

额外注意事项 #

• 确保后端API能通过请求中的认证凭证（如HttpOnly Cookie或请求头中的Token）正确识别已登录用户，返回有效数据。
• 如果使用localStorage存储token，需在getUserDataAsync中先读取token并携带到请求中。

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