React 高阶组件(Hoc)实现权限控制以及Context的应用

React 高阶组件(Hoc)实现权限控制

实现效果

• 全局改变颜色
• 根据权限判断是否显示

设计实现

• 两个组件 user 和 common 两个页面
• 模拟数据使其能够判断是否有权限查看，没有返回无权限页面

style.css

.dart{
    background-color: black;
    color: white;
}
.light{
    background-color: white;
    color: black;
}

user.js

import React from 'react'
import hoc from '../utils/filter'
 function User() {
    return '我是user页面'
}
User.displayName = 'user'
export default  hoc('user')(User);

common.js

import React from 'react'
import hoc from '../utils/filter'
function Common(params) {
    return <div {...params}>我是common页面</div>
}
Common.displayName = 'common'
export default  hoc('common')(Common);

error.js

import React from 'react'
export default function Error() {
    return '你没有权限'
}

filter.js

import React from 'react'
import Error from '../component/error'
import { Permission } from '../root'
import '../style/style.css'
export default function PageFilter(authorization) {
    return function components(Component) {
        return function Home(params) {
            const matchPermission = (value, list) => list.indexOf(value) 
            return <Permission.Consumer>
                {
                    ({ permissionList, className }) => {
                        return <div className={className}> {matchPermission(authorization, permissionList) >= 0 ? <Component /> : <Error />}</div>
                    }
                }
            </Permission.Consumer>
        }
    }
}

root.js

import { renderRoutes } from 'react-router-config'
import { BrowserRouter as Router, useHistory } from 'react-router-dom'
import Common from './component/common'
import User from './component/user'
import React from 'react'
export const Permission = React.createContext([])
const menusList = [
  {
    name: 'common页面',
    path: '/hoc/common',
    component: Common
  },
  {
    name: 'user页面',
    path: '/hoc/user',
    component: User
  },

]
function Meuns() {
  const history = useHistory()
  return <div className="theStyle" >
    {menusList.map(item => <div>
      <span className="routerLink"
        key={item.path}
        onClick={() => { history.push(item.path) }}
      >{item.name}</span></div>)}
  </div>
}
export default function Index() {
  const [rootPermission, setRootPermission] = React.useState({ permissionList: [] })
  React.useEffect(() => {
    setRootPermission({ permissionList: ['common'], className: 'dart' })
  }, [])
  return <>
    <Router  >
      <Meuns />
      <button onClick={()=>{
        setRootPermission({
          ...rootPermission,
          className:rootPermission.className === 'light' ? 'dart':'light'
        })
      }}>点击我改变背景颜色</button>
      <br/>
      <Permission.Provider value={rootPermission} >
        {renderRoutes(menusList)}
      </Permission.Provider>
    </Router>
  </>
}