快捷導(dǎo)航

react高階組件經(jīng)典應(yīng)用之權(quán)限控制詳解

更新時(shí)間：2017年09月07日 09:22:33 作者：marginyu

在React中,高階組件是重用組件邏輯的一項(xiàng)高級技術(shù)。下面這篇文章主要給大家介紹了關(guān)于react高階組件經(jīng)典應(yīng)用之權(quán)限控制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

所謂高級組件，即：接受一個(gè)組件作為參數(shù)，并且其返回值也為一個(gè)react組件

而大家應(yīng)該都知道，權(quán)限控制算是軟件項(xiàng)目中的常用功能了。在網(wǎng)站中，權(quán)限控制一般分為兩個(gè)維度：頁面級別和頁面元素級別。

我們來說說頁面元素粒度的權(quán)限控制。在某個(gè)頁面中，有個(gè)“創(chuàng)建用戶”的按鈕，管理員才能看到。

一般想到的做法類似這樣

class Page extends Component{
 render() {
 let hasCreatePermission = tool.getAuth("createUser"); 
 return (
  <div>
  {hasCreatePermission ? <Button>創(chuàng)建用戶</Button> : null}
  </div>
 );
 }
}

在當(dāng)前用戶的權(quán)限列表中判斷是否有“創(chuàng)建用戶”的權(quán)限，然后控制按鈕的顯示和隱藏。

有一天，產(chǎn)品經(jīng)理說，“沒有權(quán)限的話，按鈕就置灰”。

于是代碼改成了這樣：

 render() {
 let hasCreatePermission = tool.getAuth("createUser"); 
 return (
  <div>
  {hasCreatePermission ? <Button>創(chuàng)建用戶</Button> : <Button disabled={true}>創(chuàng)建用戶</Button>}
  </div>
 );
 }

過了一個(gè)月，產(chǎn)品經(jīng)理又說，“沒有權(quán)限的話，按鈕也正常展示，只是點(diǎn)擊后給個(gè)'申請權(quán)限'的文案提示”。

額，硬著頭皮改了下代碼：

 render() {
 let hasCreatePermission = tool.getAuth("createUser"); 
 return (
  <div>
  {hasCreatePermission ? <Button>創(chuàng)建用戶</Button> : <Button onClick={()=>alert("權(quán)限不足，請找管理員小K申請")}>創(chuàng)建用戶</Button>}
  </div>
 );
 }

如果網(wǎng)站中只有幾個(gè)權(quán)限控制的按鈕還好，想象一下，如果有50+這樣的按鈕，內(nèi)心是不是想砍需求方？

需求方是不敢砍的。那么有沒有一種方法，可以統(tǒng)一控制無權(quán)限時(shí)候的表現(xiàn)呢？

有。讓我們來試試React的高階組件吧。

export let wrapAuth = ComposedComponent =>class WrapComponent extends Component {
 // 構(gòu)造
 constructor(props) {
  super(props);
 }

 static propTypes = {
  auth:PropTypes.string.isRequired,
 };

 render() {
  if (tool.getAuth(this.props.auth)) {
  return <ComposedComponent { ...this.props} />;
  } else {
  return null;
  }
 }
};

這個(gè)方法實(shí)際上是一個(gè)包裝器，接受一個(gè)組件參數(shù)，根據(jù)權(quán)限，返回一個(gè)新的組件。

然后頁面按鈕的權(quán)限控制實(shí)現(xiàn)改成：

const AuthButton = wrapAuth(Button);
class Page extends Component{
 render() {
 return (
  <div>
  <AuthButton auth="createUser">創(chuàng)建用戶</AuthButton>
  </div>
 );
 }
}

當(dāng)遇到前面所說的需求變動(dòng)時(shí)，現(xiàn)在只要把包裝器里return null這行代碼改成

return <ComposedComponent disabled={true} { ...this.props} />

或者

return <ComposedComponent onClick={()=>alert("權(quán)限不足，請找管理員小K申請")} { ...this.props} />

就行啦。

嗯，高階組件讓生活又美好了一些~

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

react高階組件經(jīng)典應(yīng)用之權(quán)限控制詳解

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具