如何基于Django Rest Framework权限限制React前端页面访问？

推荐你采用第二种思路——登录时由后端基于用户权限生成可访问页面列表并返回前端，而非直接在用户表中存储页面列表，原因如下：

• 扩展性更强：页面路由或权限规则变更时，无需批量修改用户表数据，仅需调整后端的「权限-页面映射逻辑」即可，避免了繁琐的数据维护操作。
• 逻辑更合理：权限是核心控制单元，页面只是权限的载体，基于权限推导可访问页面，能避免出现权限与页面列表不一致的矛盾情况。
• 安全性更高：直接存储页面列表存在被篡改的风险（比如前端本地存储被恶意修改），而基于权限推导的模式下，即使前端绕过路由限制，后端接口仍有权限校验作为最终屏障。

结合后端返回的权限数据，前端可通过以下步骤实现页面访问限制：

1. 后端返回标准化权限数据 #

登录成功后，后端返回两类关键数据：

• 用户的权限集合（如 permissions: ['article_edit', 'user_manage', 'comment_approve']）
• 权限与页面路由的映射关系（如 permissionRoutes: { 'article_edit': '/articles/edit', 'user_manage': '/users' }），也可由前端维护该映射，但后端返回能保证前后端规则统一。

2. 前端存储权限状态 #

将权限数据和可访问页面列表存入全局状态管理工具（如Redux、Zustand）或localStorage，方便全应用随时获取。示例：

// 使用Zustand管理权限状态
import { create } from 'zustand';

export const useAuthStore = create((set) => ({
  userPermissions: [],
  accessibleRoutes: [],
  setAuthData: (permissions, routes) => set({
    userPermissions: permissions,
    accessibleRoutes: routes
  })
}));

3. 路由层面的权限守卫 #

基于React Router实现路由拦截，自定义权限校验组件包裹需要限制的路由：

import { Navigate, Outlet } from 'react-router-dom';
import { useAuthStore } from '../stores/authStore';

// 单个权限校验组件
const RequirePermission = ({ requiredPermission }) => {
  const { userPermissions } = useAuthStore();
  // 判断用户是否拥有目标权限
  const hasPermission = userPermissions.includes(requiredPermission);
  return hasPermission ? <Outlet /> : <Navigate to="/unauthorized" replace />;
};

// 路由配置示例
const routes = [
  {
    path: '/articles/edit',
    element: <RequirePermission requiredPermission="article_edit"><ArticleEditPage /></RequirePermission>
  },
  {
    path: '/users',
    element: <RequirePermission requiredPermission="user_manage"><UserManagePage /></RequirePermission>
  },
  {
    path: '/unauthorized',
    element: <UnauthorizedPage />
  }
];

如果页面需要多个权限才能访问，可修改校验逻辑为：

const hasPermission = requiredPermissions.every(perm => userPermissions.includes(perm));

4. 动态生成导航菜单 #

根据accessibleRoutes动态渲染侧边栏或顶部导航，只展示用户有权限的页面链接，避免无效入口：

import { useAuthStore } from '../stores/authStore';

const Sidebar = () => {
  const { accessibleRoutes } = useAuthStore();
  return (
    <div className="sidebar">
      {accessibleRoutes.map(route => (
        <Link key={route.path} to={route.path}>{route.name}</Link>
      ))}
    </div>
  );
};

5. 注意事项 #

• 前端权限控制仅为体验优化和辅助限制，核心安全必须依赖后端的接口权限校验，不能仅靠前端拦截路由。
• 若用户权限在会话中发生变更（如切换角色），需同步更新全局状态中的权限数据，确保路由和菜单实时生效。

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