React结合用户权限的路由映射最优方案及代码优化咨询

问题拆解 #

当前实现虽能正常运行，但存在几个明显痛点：

• 路由循环里的权限判断逻辑揉在一起，可读性差，后续新增路由容易出错
• 路由配置中直接渲染组件实例（<Home />），会导致组件提前初始化，浪费性能
• 根路由的exact判断冗余，react-router v6默认就是精确匹配

下面是一套更清晰、可扩展的重构方案：

重构步骤 #

1. 优化路由配置文件

将组件实例替换为组件引用，后续还可按需扩展角色权限字段：

import Login from '../Pages/Auth/Login';
import Register from '../Pages/Auth/Register';
import Home from '../Pages/Home/Home';
// 示例：新增需要权限的页面
import Dashboard from '../Pages/Dashboard/Dashboard';

const routes = [
  {
    path: '/',
    component: Home,
    protected: false,
  },
  {
    path: '/login',
    component: Login,
    protected: false,
  },
  {
    path: '/register',
    component: Register,
    protected: false,
  },
  {
    path: '/dashboard',
    component: Dashboard,
    protected: true,
    // 可选：细粒度权限控制可添加角色字段
    // roles: ['admin', 'editor']
  },
];

export default routes;

2. 封装权限路由组件

把权限判断逻辑抽成独立组件，统一处理权限校验与跳转逻辑：

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

const ProtectedRoute = ({ children }) => {
  const user = useSelector((state) => state.user);
  
  // 未登录时，访问受保护路由自动跳转到登录页
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  
  // 可选：添加角色权限校验逻辑
  // const hasPermission = user.roles.some(role => roles.includes(role));
  // if (!hasPermission) return <Navigate to="/403" replace />;
  
  return children;
};

export default ProtectedRoute;

3. 简化App.js的路由渲染

现在循环渲染的逻辑会非常简洁，无需再写复杂的条件判断：

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { isLoggedIn } from './redux/slices/auth';
import './App.css';
import Layout from './Layouts/Layout';
import routes from './config/routes';
import ProtectedRoute from './Components/ProtectedRoute'; // 引入封装的权限组件

function App() {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user);
  const isLoading = useSelector((state) => state.auth.isLoading); // 建议添加登录状态加载标识

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

  // 登录状态未确定时显示加载，避免页面闪烁
  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          {routes.map((route, index) => {
            const RouteComponent = route.component;
            return (
              <Route
                key={index}
                path={route.path}
                element={
                  route.protected ? (
                    <ProtectedRoute>
                      <RouteComponent />
                    </ProtectedRoute>
                  ) : (
                    <RouteComponent />
                  )
                }
              />
            );
          })}
        </Routes>
      </Layout>
    </BrowserRouter>
  );
}

export default App;

重构优势 #

• 逻辑解耦：权限判断集中在ProtectedRoute，App.js仅负责路由映射，代码更清爽
• 可扩展性：后续新增角色权限、自定义跳转逻辑，仅需修改ProtectedRoute
• 性能优化：路由配置传递组件引用，只有路由匹配时才会初始化组件
• 可读性高：新增路由只需在配置中添加一条，无需编写复杂条件判断

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