React如何使用高階組件與Hooks實現(xiàn)權(quán)限攔截

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

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

思路

• 使用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)限攔截功能

到此，相信大家對“React如何使用高階組件與Hooks實現(xiàn)權(quán)限攔截”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！