乙個React包裝器的應用許可權管理

在我們的應用中，每個按鈕都有個許可權點，前端通過介面的方式取得此使用者的許可權點列表，再來決定按鈕是否顯示。假設我們許可權點列表取得後存在window.globals.permissions。

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

class page1 extend react.component  = window.globals.permissions;
return ();}
}

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

class page1 extend react.component  = window.globals.permissions;
return ();}
}

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

class page1 extend react.component 
);        
}}

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

export default function injectauth(component)  = props;
// no auth required
if(auth == null) 
return windows.globals.permissions[auth];      
}render() 
else  else if(noauthtype === 'disabled') );
} else }}
}}

injectauth(component)方法的入參是元件的class，這裡的例子是button。injectauth將產生了乙個新的class，這個class繼承了button class，所以原本button元件的行為都會被保留下來。

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

return super.render();

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

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

class button 
export default injectauth(button);

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

乙個React包裝器的應用許可權管理

React的乙個表單驗證器formsy react

建立乙個react專案

react的第乙個頁面

乙個React包裝器的應用 許可權管理

React的乙個表單驗證器formsy react

建立乙個react專案

react的第乙個頁面

相關推薦

乙個React包裝器的應用許可權管理