react权限管理实现

权限管理的基本思路

在React中实现权限管理通常基于以下核心逻辑：通过用户角色或权限标识控制UI渲染与路由访问。常见方法包括路由级权限校验、组件级权限控制、全局状态管理（如Redux或Context）等。

路由级权限控制

通过拦截路由跳转实现权限校验，未授权用户跳转至登录页或403页面。

1. 使用高阶组件（HOC）
   封装一个权限校验高阶组件，包裹需要权限的路由：

   const withAuth = (WrappedComponent, requiredRole) => {
     return (props) => {
       const { userRole } = useAuth(); // 假设从全局状态获取用户角色
       if (userRole !== requiredRole) {
         return <Redirect to="/forbidden" />;
       }
       return <WrappedComponent {...props} />;
     };
   };

   路由配置示例：

   <Route path="/admin" component={withAuth(AdminPage, 'admin')} />

2. 动态路由表
   根据用户权限动态生成路由配置：

   const routes = [
     { path: '/dashboard', component: Dashboard, roles: ['user', 'admin'] },
     { path: '/admin', component: Admin, roles: ['admin'] },
   ];
   // 过滤出用户有权限的路由
   const filteredRoutes = routes.filter(route => route.roles.includes(userRole));

组件级权限控制

通过条件渲染控制组件显示，适用于按钮、菜单等细粒度场景。

1. 自定义权限指令组件
   封装一个Permission组件，根据权限决定是否渲染子内容：

   const Permission = ({ role, children }) => {
     const { userRole } = useAuth();
     return userRole === role ? children : null;
   };

   使用示例：

   <Permission role="admin">
     <button>Delete</button>
   </Permission>

2. 权限枚举与校验函数
   定义权限枚举和校验工具函数：

   

   const PERMISSIONS = {
     EDIT: 'edit',
     DELETE: 'delete',
   };
   const checkPermission = (userPermissions, requiredPermission) => {
     return userPermissions.includes(requiredPermission);
   };

全局状态管理

通过Redux或Context API集中管理用户权限状态。

1. Redux实现示例

   // store.js
   const initialState = { role: null, permissions: [] };
   const authReducer = (state = initialState, action) => {
     switch (action.type) {
       case 'SET_ROLE':
         return { ...state, role: action.payload };
       default:
         return state;
     }
   };

   在组件中获取权限：

   const { role } = useSelector(state => state.auth);

2. Context API实现
   创建权限上下文：

   const AuthContext = createContext();
   const AuthProvider = ({ children }) => {
     const [user, setUser] = useState({ role: 'guest' });
     return (
       <AuthContext.Provider value={{ user }}>
         {children}
       </AuthContext.Provider>
     );
   };

后端配合与JWT

1. JWT鉴权
   前端存储JWT令牌，并在请求头中携带：

   axios.interceptors.request.use(config => {
     config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
     return config;
   });

2. 权限接口校验
   后端返回用户权限列表，前端缓存以减少重复请求：

   useEffect(() => {
     fetchUserPermissions().then(permissions => {
       dispatch(setPermissions(permissions));
     });
   }, []);

最佳实践建议

• 最小权限原则：仅授予必要权限。
• 服务端兜底校验：前端权限控制需与后端配合，避免仅依赖前端校验。
• 错误处理：统一处理403/401错误，跳转至对应页面。
• 测试覆盖：针对不同角色编写单元测试，验证权限逻辑。