一个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的带代码了。