日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

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

作者：綠胡子大叔 ? 更新時(shí)間： 2023-03-22 編程語(yǔ)言

高階組件是以組件作為參數(shù)，返回一個(gè)組件的函數(shù)。返回的組件把傳進(jìn)去的組件進(jìn)行功能強(qiáng)化。通過(guò)以下示例進(jìn)一步理解高階組件。

思路

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

實(shí)現(xiàn)

注入權(quán)限列表

抽離Context

在文件中創(chuàng)建一個(gè)context，并使用export暴露出對(duì)應(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

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

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

/*
 * 資源路徑 ./src/components/PermissionIndex/PermissionIndex.js
 */
import React, { useState, useEffect } from 'react'
import { PermissionContextProvider } from '../../utils/PermissionContext' // import對(duì)應(yīng)的Context
function PermissionIndex(Component) {
  return function Index(props){
    const [permission, setpermission] = useState([])
    useEffect(()=>{
		setpermission(['edituser','checkorder'])
		//此處實(shí)際為 獲取權(quán)限列表的請(qǐng)求操作
	},[])
	//代替了類組件的componenetDidMount生命周期
    return (
      <PermissionContextProvider value={permission}>
        <Component {...props}></Component>
      </PermissionContextProvider>
      //此處返回了注入權(quán)限列表Context的組件
    )
  }
}
export default PermissionIndex
  • useState用于動(dòng)態(tài)注入獲取的權(quán)限列表
  • 組件通過(guò)Context.Provider包裹。權(quán)限列表改變，所有消費(fèi)權(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

無(wú)權(quán)限時(shí)顯示的組件

import React from 'react'
function NoPermission() {
  return (
    <div>對(duì)不起，請(qǐng)與管理員獲取權(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獲取當(dāng)前的權(quán)限列表，相當(dāng)于類組件中的contentType靜態(tài)屬性
      return context.indexOf(authorization) >= 0 ? <Component {...props}></Component> : <NoPermission></NoPermission>
    }
  }
}
export default PermissionHoc
  • 此示例中使用兩層包裝函數(shù)的HOC，第一層用于獲取HOC綁定的當(dāng)前組件的權(quán)限簽名，因?yàn)橐眠@個(gè)權(quán)限簽名和權(quán)限列表做匹配。第二層接受原始組件。
  • 在HOC中使用 useContext 接收權(quán)限列表，做權(quán)限匹配。組件有權(quán)限則展示，沒(méi)有權(quán)限則展示無(wú)權(quán)限組件。

測(cè)試

用于測(cè)試的組件

/*
 * 資源路徑 ./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>
  )
}

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

原文鏈接：https://blog.csdn.net/m0_52761633/article/details/123493935

欄目分類
最近更新