如何基于后端返回的URL在ReactJS中实现路由级用户访问控制

一、预处理后端权限数据 #

先把后端返回的权限结构转换成便于路由校验的格式——提取所有可访问的完整路径，存入全局状态（比如Context或Redux），方便后续组件调用：

// 提取所有允许访问的路由路径
const extractAllowedPaths = (permissions) => {
  const allowedPaths = new Set();
  Object.values(permissions).forEach(menuGroup => {
    // 添加父级路由路径（如/home）
    allowedPaths.add(`/${menuGroup.uri}`);
    // 添加所有子路由路径（如/home/dashboard）
    menuGroup.menus.forEach(subMenu => {
      allowedPaths.add(`/${subMenu.uri}`);
    });
  });
  return allowedPaths;
};

// 登录成功后调用，将结果存入全局状态
const backendPermissions = { /* 后端返回的权限数据 */ };
const allowedPaths = extractAllowedPaths(backendPermissions);

二、实现路由守卫组件 #

创建ProtectedRoute组件，作为路由的权限校验层，检查当前路径是否在允许列表中，无权限则跳转至403页面：

import { Navigate, useLocation } from 'react-router-dom';

const ProtectedRoute = ({ children, allowedPaths }) => {
  const { pathname } = useLocation();

  // 校验当前路径是否在权限列表内
  if (allowedPaths.has(pathname)) {
    return children;
  }

  // 无权限时跳转至403页面（可根据需求替换为首页或其他页面）
  return <Navigate to="/403" replace />;
};

三、改造路由配置 #

方式1：给固定路由添加守卫

如果你的路由是预先定义好的，直接给每个需要保护的路由套上ProtectedRoute：

import { Router, Routes, Route } from 'react-router-dom';
import { useAuthContext } from './AuthContext'; // 假设全局状态存在Context中

const AppRouter = () => {
  const { allowedPaths } = useAuthContext();

  return (
    <Router>
      <Routes>
        <Route 
          path="/home" 
          element={
            <ProtectedRoute allowedPaths={allowedPaths}>
              <Users />
            </ProtectedRoute>
          }
        >
          <Route 
            path="dashboard" 
            element={
              <ProtectedRoute allowedPaths={allowedPaths}>
                <Dashboard />
              </ProtectedRoute>
            } 
          />
          <Route 
            path="people" 
            element={
              <ProtectedRoute allowedPaths={allowedPaths}>
                <People />
              </ProtectedRoute>
            } 
          />
          <Route 
            path="subject" 
            element={
              <ProtectedRoute allowedPaths={allowedPaths}>
                <Subject />
              </ProtectedRoute>
            } 
          />
        </Route>
        {/* 无权限页面 */}
        <Route path="/403" element={<NoPermission />} />
      </Routes>
    </Router>
  );
};

方式2：动态生成路由（更灵活）

如果权限经常变动，可直接基于后端返回的权限数据动态生成路由，避免手动维护路由列表：

import { Router, Routes, Route } from 'react-router-dom';
import { useAuthContext } from './AuthContext';

// 组件映射表：根据后端uri匹配对应组件
const ComponentMap = {
  'home/dashboard': Dashboard,
  'home/people': People,
  'home/subject': Subject
};

const AppRouter = () => {
  const { allowedPaths, permissions } = useAuthContext();

  return (
    <Router>
      <Routes>
        {Object.values(permissions).map((group, idx) => (
          <Route
            key={idx}
            path={`/${group.uri}`}
            element={
              <ProtectedRoute allowedPaths={allowedPaths}>
                <Users />
              </ProtectedRoute>
            }
          >
            {group.menus.map((subMenu, subIdx) => {
              const TargetComponent = ComponentMap[subMenu.uri];
              return TargetComponent ? (
                <Route
                  key={subIdx}
                  path={subMenu.uri.split('/')[1]} // 提取子路由部分（如dashboard）
                  element={
                    <ProtectedRoute allowedPaths={allowedPaths}>
                      <TargetComponent />
                    </ProtectedRoute>
                  }
                />
              ) : null;
            })}
          </Route>
        ))}
        <Route path="/403" element={<NoPermission />} />
      </Routes>
    </Router>
  );
};

四、同步渲染权限菜单 #

前端菜单也要和权限对应，只渲染用户有权限的菜单项：

import { Link } from 'react-router-dom';
import { useAuthContext } from './AuthContext';

const SideMenu = () => {
  const { permissions } = useAuthContext();

  return (
    <div className="side-menu">
      {Object.values(permissions).map((group, idx) => (
        <div key={idx} className="menu-group">
          <h3>{group.name}</h3>
          <ul>
            {group.menus.map((subMenu, subIdx) => (
              <li key={subIdx}>
                <Link to={`/${subMenu.uri}`}>{subMenu.name}</Link>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

关键注意事项 #

• 后端权限校验不可缺：前端路由控制仅用于优化用户体验，后端必须在接口层面做权限校验，防止用户通过直接调用接口越权。
• 路径匹配一致性：确保后端返回的uri和前端路由path完全匹配（包括斜杠、大小写）。
• 全局状态持久化：刷新页面时，需重新从后端获取权限数据，再初始化路由守卫，避免状态丢失。
• 无权限跳转处理：可根据业务需求，将无权限跳转目标设置为403页面、首页或登录页。

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