在博客的上一篇文章写道了动态路由权限控制，网上寻找一番没有找到权限按钮控制，我按照自己的思路实现了通过自定义指令控制权限按钮.

按钮权限实现方法我这边使用了一个比较简单的方法，大部分教程都是使用的v-if来控制按钮的权限，但是这样需要在每个按钮都加上v-if判断，这样如果某个权限id有变化，需要重新检索一遍按钮id，使用我这个方法就不需要了，只需要加上自定义指令即可.

1. 如果你用了动态路由，需要后端返回的路由中添加一些判断参数.

// 返回的路由meta字段中添加Authority数组，这个用来判断是否有该按钮的权限
// ps:动态路由中只有meta字段能过获取到参数.
{
        {
            "id": 1,
            "children": [
                {
                    "id": 2,
                    "meta": {
                        "Authority": [
                            "导入学员档案",
                            "下载批量导入模板",
                            "创建学员档案",
                            "编辑",
                            "导出"
                        ]
                    }
                }
                ]
    }
}

2. 新建自定义指令文件，最后引入到main.js中.

export default (Vue)=>{
      //自定义指令，全局按钮权限控制
      Vue.directive("has",{
        inserted:function(el, binding, vnode, oldVnode){
//判断是否需要权限，并且查看按钮权限是否匹配，如果不匹配删除按钮.(el是dom元素，需要根据自己项目变更.) if(!vnode.context.$route.meta.Authority||!vnode.context.$route.meta.Authority.includes(el.children[0].innerText?el.children[0].innerText:el.children[1].innerText)){
                el.parentNode.removeChild(el);
            }
        }
    })
}

3. main.js注册全局组件，在需要做权限控制的按钮添加v-has指令.

//引入自定义指令文件
import  directives from '@/utils/directives'
//注册指令
Vue.use(directives)
//使用自定义指令
<button v-has></button>

小结

不一定所有的权限都可以使用自定义指令控制，建议存储一个按钮权限数组，使用v-if="[].includes()"来判断是否存在.

我这可能并不是最优的解决方法，但是在我的这个项目中我觉得是比较不错的解决方案，有更好的方案，欢迎指出.