React基于RBAC的权限控制案例讲解

// roles.js
const roles = {
  admin: {
    permissions: ['view_dashboard', 'edit_dashboard', 'view_selection', 'edit_selection']
  },
  user: {
    permissions: ['view_dashboard', 'view_selection']
  }
};
export default roles;

// auth.js
import roles from './roles';

export function hasPermission(userRole, permission) {
  const permissions = roles[userRole]?.permissions || [];
  return permissions.includes(permission);
}

// ProtectedRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { hasPermission } from './auth';
const ProtectedRoute = ({ component: Component, userRole, permission, ...rest }) => (
  <Route {...rest} render={
    props => hasPermission(userRole, permission) ? 
      (<Component {...props} />) : 
      (<Redirect to="/unauthorized" />)
  } />
);
export default ProtectedRoute;

// SomeComponent.js
import React from 'react';
import { hasPermission } from './auth';
const SomeComponent = ({ userRole }) => {
  return (
    <div>
      {hasPermission(userRole, 'view_dashboard') && <div>Dashboard View</div>}
      {hasPermission(userRole, 'edit_dashboard') && <button>Edit Dashboard</button>}
    </div>
  );
};
export default SomeComponent;

// SelectionComponent.js
import React from 'react';
import { hasPermission } from './auth';
const SelectionComponent = ({ userRole }) => {
  return (
    <select>
      <option value="option1">Option 1</option>
      {hasPermission(userRole, 'edit_selection') && <option value="option2">Option 2</option>}
    </select>
  );
};
export default SelectionComponent;

import { hasPermission } from './auth';
// 自定义Hook，用于检查权限
function useAuth(userRole, permission) {
  const isAllowed = hasPermission(userRole, permission);
  return { isAllowed };
}

import React from 'react';
import { hasPermission } from './auth';
// 高阶组件，用于权限控制
const withAuth = (WrappedComponent, permission) => {
  return class extends React.Component {
    render() {
      const { userRole, ...rest } = this.props;
      const isAllowed = hasPermission(userRole, permission);
      if (!isAllowed) {
        // 根据需要返回null，或者重定向，或者渲染一个无权限的提示组件等
        return null; // 或者 <Redirect to="/unauthorized" /> 等
      }
      return <WrappedComponent {...rest} />;
    }
  };
};

import React from 'react';
import { useAuth } from './useAuth';
const EditButton = ({ userRole }) => {
  const { isAllowed } = useAuth(userRole, 'edit_dashboard');
  if (!isAllowed) {
    return null; // 或者其他处理方式，如渲染一个禁用的按钮等
  }
  return <button>Edit</button>;
};

import React from 'react';
import { withAuth } from './withAuth';
const Button = () => <button>Edit</button>;
// 使用HOC封装按钮，只有具有edit_dashboard权限的用户才能看到这个按钮
const EditButton = withAuth(Button, 'edit_dashboard');
// 在使用EditButton时，需要传入userRole