React中如何使用Redux Store实现用户访问Admin面板的权限控制

我来给你梳理一套完整的实现方案，完全贴合你的场景需求：

一、页面刷新时的用户信息同步逻辑 #

首先解决页面刷新后Redux Store用户信息丢失的问题，我们可以在根组件（比如App.js）里加一个初始化检查：

// App.js
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUser } from './redux/actions/userActions';
import AppRoutes from './routes/AppRoutes';

function App() {
  const dispatch = useDispatch();
  const currentUser = useSelector(state => state.user);
  const storedJwt = localStorage.getItem('jwt');

  useEffect(() => {
    // 核心逻辑：有JWT但Store里无用户信息时，拉取用户数据
    if (storedJwt && !currentUser) {
      dispatch(fetchUser(storedJwt));
    }
  }, [dispatch, storedJwt, currentUser]);

  return <AppRoutes />;
}

export default App;

对应的fetchUser action要处理API请求，还要考虑token无效/过期的情况：

// redux/actions/userActions.js
import axios from 'axios';

export const fetchUser = (token) => async (dispatch) => {
  try {
    const res = await axios.get('/api/user/me', {
      headers: { Authorization: `Bearer ${token}` }
    });
    dispatch({ type: 'SET_USER', payload: res.data });
  } catch (err) {
    // token失效时，清除本地存储并重置Store，跳转到登录页
    localStorage.removeItem('jwt');
    dispatch({ type: 'CLEAR_USER' });
    window.location.href = '/login';
  }
};

别忘记在reducer里处理对应的action：

// redux/reducers/userReducer.js
const initialState = null;

export default (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return action.payload;
    case 'CLEAR_USER':
      return null;
    default:
      return state;
  }
};

二、AdminRoute管理员专属路由实现 #

我们可以写一个高阶路由组件，用来统一控制管理员权限：

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

function AdminRoute() {
  const user = useSelector(state => state.user);

  // 第一步：检查用户是否已登录
  if (!user) {
    return <Navigate to="/login" replace />;
  }

  // 第二步：检查用户是否拥有管理员权限（假设user对象里有isAdmin字段）
  if (!user.isAdmin) {
    return <Navigate to="/unauthorized" replace />;
  }

  // 权限校验通过，渲染对应路由组件
  return <Outlet />;
}

export default AdminRoute;

这里用Outlet来渲染嵌套的子路由，是react-router-dom v6+的写法，非常简洁。

三、整体路由配置 #

最后把所有路由整合起来，区分公开路由、普通用户路由和管理员路由：

// routes/AppRoutes.js
import { Routes, Route, Navigate } from 'react-router-dom';
import AdminRoute from '../components/AdminRoute';
import Home from '../pages/Home';
import Login from '../pages/Login';
import Register from '../pages/Register';
import AdminDashboard from '../pages/AdminDashboard';
import Unauthorized from '../pages/Unauthorized';

function AppRoutes() {
  return (
    <Routes>
      {/* 公开路由：所有人都能访问 */}
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route path="/unauthorized" element={<Unauthorized />} />

      {/* 普通用户路由：登录后可访问（如果首页需要登录，也可以用类似AdminRoute的PrivateRoute包裹） */}
      <Route path="/" element={<Home />} />

      {/* 管理员专属路由：用AdminRoute统一守卫 */}
      <Route element={<AdminRoute />}>
        <Route path="/admin/dashboard" element={<AdminDashboard />} />
        <Route path="/admin/users" element={<AdminUserManagement />} />
        {/* 其他管理员路由都可以放在这里 */}
      </Route>

      {/* 404路由：匹配所有未定义的路径 */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}

export default AppRoutes;

额外注意事项 #

• 如果你的普通路由也需要登录才能访问，可以模仿AdminRoute写一个PrivateRoute组件，只检查是否登录即可。
• 建议在API请求的拦截器里统一处理JWT的携带，避免每个请求都手动加headers。
• 要注意JWT的过期时间，可以在后端返回token时附带过期时间，前端做主动刷新或者提示用户重新登录。

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