有一个方法可以绕开这个烂摊子，那就是前端放弃对视图层的控制，退到请求层面，在请求发起前集中拦截，这时可以直接根据请求方法和请求地址来校验权限，除了实现一个拦截器之外不需要额外的代码，可以说非常优雅了。以axios为例，拦截器大概长这样：
axios.interceptors.request.use(function (config) { if(!has(config)){ //验证不通过 return Promise.reject({ message: `no permission` }); } return config; });
但如果仅仅这样做权限控制，界面上将显示出所有的按钮，用户看到的按钮却不一定可以点击，这种体验我认为只能停留在理论层面，根本无法应用到实际产品中。请求控制可以作为整个控制体系的第二道防线，或某些特殊情况下的辅助手段，最终还是要回到按钮控制的思路上来。
那么怎样能尽可能方便的采集到每个按钮所需的权限呢？按钮和权限之间隔着两层东西，第一层是click回调，第二层是回调里的AJAX请求，不想人肉维护就得想办法突破这两层隔阂，让按钮和权限产生联系，按钮必然要绑定click事件，最理想的采集方式是在绑定事件的同时得到所需权限，让一切自然而然的发生，比如这样，
<btn v-do="Fn">按钮</btn>
如果Fn能以某种形式采集到内部的AJAX请求参数，并转化成权限信息传递出来就完美了，然而我没找到可行的方法，并且这种形式在应用上也存在缺陷，因为不一定每个操作按钮都会发起AJAX请求，比如编辑按钮本身并不会触发请求，真正触发请求的是另一个保存按钮，所以这个思路只是看起来很美。
那么退而求其次的做法是让按钮和请求联系起来，比如说按钮涉及一个名称为A的请求，那么我希望权限指令可以这样写，
<btn v-has="A" @click="Fn">按钮</btn>
比完美形态是差了不少，但起码不需要手动维护到'get,/resources'这个级别了，这里对A的实现可以有多种形式，比如A可以是一个包含两个属性的对象：
const A = { p: ['put,/menu/**'], r: params => { return axios.put(`/menu/${params.id}`, params) } }; //用作权限： <btn v-has="[A]" @click="Fn">按钮</btn> //用作请求： function Fn(){ A.r().then((res) => {}) }
通常我们会将项目里所有的api放在一个api模块里集中管理，在写api时顺便就把权限给维护了，换来的是在组件界面里可以直接用请求名称来描述权限，而不需要来回奔波于界面和api模块之间，一定程度上实现了关注点分离，而且has指令还可以进一步做优化，例如参数只需要接收A，指令内部根据约定自动访问A.p来获取权限，还可以接收数组，允许多个权限联合校验。
后记
好了，这就是我对前端权限控制的一些实践和思考，如有不当欢迎指正。
最后吐槽一下Element-UI，真心难看。