React使用高階組件與Hooks實現(xiàn)權(quán)限攔截教程詳細分析

更新時間：2023年01月28日 15:40:57 作者：綠胡子大叔

高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React高階組件使用小結(jié)，一起看看吧

思路

使用HOC包裹需要權(quán)限的頁面或組件，并注入唯一的權(quán)限簽名
用Context保存全局的權(quán)限菜單列表，用Provider注入異步獲取到的權(quán)限菜單
在HOC中用useContext / Consumer獲取權(quán)限列表，并和簽名做匹配。如果有權(quán)限，則展示；沒有權(quán)限，展示沒有權(quán)限組件

實現(xiàn)

注入權(quán)限列表

抽離Context

在文件中創(chuàng)建一個context，并使用export暴露出對應(yīng)的Provider，Consumer，Context

/*
 * 資源路徑 ./src/utils/PermissionContext.js
 */
import { createContext } from "react";
const PermissionContext = createContext()
export const PermissionContextProvider = PermissionContext.Provider
export const PermissionContextConsumer = PermissionContext.Consumer
export default PermissionContext

向頁面注入權(quán)限列表的HOC

此處創(chuàng)建一個HOC，包裹了App組件，實現(xiàn)了向整個頁面注入Permission列表

/*
 * 資源路徑 ./src/components/PermissionIndex/PermissionIndex.js
 */
import React, { useState, useEffect } from 'react'
import { PermissionContextProvider } from '../../utils/PermissionContext' // import對應(yīng)的Context
function PermissionIndex(Component) {
  return function Index(props){
    const [permission, setpermission] = useState([])
    useEffect(()=>{
		setpermission(['edituser','checkorder'])
		//此處實際為 獲取權(quán)限列表的請求操作
	},[])
	//代替了類組件的componenetDidMount生命周期
    return (
      <PermissionContextProvider value={permission}>
        <Component {...props}></Component>
      </PermissionContextProvider>
      //此處返回了注入權(quán)限列表Context的組件
    )
  }
}
export default PermissionIndex

useState用于動態(tài)注入獲取的權(quán)限列表
組件通過Context.Provider包裹。權(quán)限列表改變，所有消費權(quán)限列表的組件重新更新

向根組件注入權(quán)限

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App'
import PermissionIndex from './components/PermissionIndex/PermissionIndex'
const IndexWithPermission = PermissionIndex(App)
ReactDOM.render(
  <IndexWithPermission/>,
  document.getElementById('root')
);

含有權(quán)限攔截功能的HOC

無權(quán)限時顯示的組件

import React from 'react'
function NoPermission() {
  return (
    <div>對不起，請與管理員獲取權(quán)限</div>
  )
}
export default NoPermission

權(quán)限攔截HOC組件

/*
 * 資源路徑 ./src/components/PermissionHOC/PermissionHOC.js
 */
import React, { useContext } from 'react'
import PermissionContext from '../../utils/PermissionContext'
import NoPermission from '../NoPermission/NoPermission'
function PermissionHoc(authorization) {
  return function(Component){
    return function PermissionIndex(props){
      const context = useContext(PermissionContext)
      //使用useContext獲取當前的權(quán)限列表，相當于類組件中的contentType靜態(tài)屬性
      return context.indexOf(authorization) >= 0 ? <Component {...props}></Component> : <NoPermission></NoPermission>
    }
  }
}
export default PermissionHoc

此示例中使用兩層包裝函數(shù)的HOC，第一層用于獲取HOC綁定的當前組件的權(quán)限簽名，因為要用這個權(quán)限簽名和權(quán)限列表做匹配。第二層接受原始組件。
在HOC中使用 useContext 接收權(quán)限列表，做權(quán)限匹配。組件有權(quán)限則展示，沒有權(quán)限則展示無權(quán)限組件。

測試

用于測試的組件

/*
 * 資源路徑 ./src/components/PermissionTest/PermissionTest.js
 */
import React from 'react'
function PermissionTest(props) {
  return (
    <div>PermissionTest - {props?.name}</div>
  )
}
export default PermissionTest

在組件中使用權(quán)限組件

/*
 * 資源路徑 ./src/components/App/App.js
 */
import React, { useContext, useEffect, useRef } from 'react'
import PermissionContext from '../../utils/PermissionContext'
import PermissionHoc from '../../components/PermissionHoc/PermissionHoc'
import PermissionTest from '../../components/PermissionTest/PermissionTest'
export default function App() {
  const Edituser = PermissionHoc('edituser')(PermissionTest)
  const Edituser1 = PermissionHoc('edituser1')(PermissionTest)
  return (
    <div>
        <Edituser name="edituser"></Edituser>
        <Edituser1 name="edituser1"></Edituser1>
    </div>
  )
}

此處，通過用PermissionHOC函數(shù)處理原始組件，進行了權(quán)限攔截功能