一個React包裝器的應用 - 權限管理

在我們的應用中，每個按鈕都有個權限點，前端通過接口的方式取得此使用者的權限點清單，再來決定按鈕是否顯示。假設我們權限點清單取得後存在<code>window.globals.permissions</code>。

傳統的方式可以在redner的時候，判斷使用者是否有此權限，在來決定按鈕是否顯示。例如：

如果現在又有個頁面叫做page2，又要再寫類似的判斷在page2裡面。再者如果需求改變成："當使用者沒有權限的時候，按鈕設定為disabled"。這樣又要把分散再各頁面的權限管理邏輯，通通修改一變，如：

這顯然不是一個優雅的解法。其實使用者是否有某按鈕的權限，隻需要關心權限點的名稱，能不能這樣寫？

在按鈕的地方，隻要指定權限點名稱就好了。要判斷window.globals.permissions和是否隐藏/disabled就交由包裝器統一處理即可。接下來我們看一下包裝器的部份：

<code>injectauth(component)</code>方法的入參是元件的class，這裡的例子是button。injectauth将産生了一個新的class，這個class繼承了button class，是以原本button元件的行為都會被保留下來。

内部再調用checkauth方法，檢查此外部傳進來的auth property是否在windows.globals.permissions是存在的。如果權限檢查通過，就直接傳回原本button的render結果：

如果權限檢查不通過，則根據noauthtype來決定是要隐藏或者disabled元件。

ok, 有了這個injector後，在我們可以在元件本身都統一置入這樣的功能：

這樣在個頁面使用元件的時候，就不用一一的去寫injectauth的帶代碼了。