React如何使用高階組件與Hooks實現權限攔截

本篇內容主要講解“React如何使用高階組件與Hooks實現權限攔截”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React如何使用高階組件與Hooks實現權限攔截”吧!

高階組件是以組件作為參數，返回一個組件的函數。返回的組件把傳進去的組件進行功能強化。通過以下示例進一步理解高階組件。

思路

• 使用HOC包裹需要權限的頁面或組件，并注入唯一的權限簽名

• 用Context保存全局的權限菜單列表，用Provider注入異步獲取到的權限菜單

• 在HOC中用useContext / Consumer獲取權限列表，并和簽名做匹配。如果有權限，則展示；沒有權限，展示沒有權限組件

實現

注入權限列表

抽離Context

在文件中創建一個context，并使用export暴露出對應的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

向頁面注入權限列表的HOC

此處創建一個HOC，包裹了App組件，實現了向整個頁面注入Permission列表

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

• useState用于動態注入獲取的權限列表

• 組件通過Context.Provider包裹。權限列表改變，所有消費權限列表的組件重新更新

向根組件注入權限

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')
);

含有權限攔截功能的HOC

無權限時顯示的組件

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

權限攔截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獲取當前的權限列表，相當于類組件中的contentType靜態屬性
      return context.indexOf(authorization) >= 0 ? <Component {...props}></Component> : <NoPermission></NoPermission>
    }
  }
}
export default PermissionHoc

• 此示例中使用兩層包裝函數的HOC，第一層用于獲取HOC綁定的當前組件的權限簽名，因為要用這個權限簽名和權限列表做匹配。第二層接受原始組件。

• 在HOC中使用 useContext 接收權限列表，做權限匹配。組件有權限則展示，沒有權限則展示無權限組件。

測試

用于測試的組件

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

在組件中使用權限組件

/*
 * 資源路徑 ./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函數處理原始組件，進行了權限攔截功能

到此，相信大家對“React如何使用高階組件與Hooks實現權限攔截”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！