vue自定义指令实现全局按钮权限控制.


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

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

  1. 如果你用了动态路由,需要后端返回的路由中添加一些判断参数.
// 返回的路由meta字段中添加Authority数组,这个用来判断是否有该按钮的权限
// ps:动态路由中只有meta字段能过获取到参数.
{
        {
            "id": 1,
            "children": [
                {
                    "id": 2,
                    "meta": {
                        "Authority": [
                            "导入学员档案",
                            "下载批量导入模板",
                            "创建学员档案",
                            "编辑",
                            "导出"
                        ]
                    }
                }
                ]
    }
}
  1. 新建自定义指令文件,最后引入到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);
            }
        }
    })
}
  1. main.js注册全局组件,在需要做权限控制的按钮添加v-has指令.
//引入自定义指令文件
import  directives from '@/utils/directives'
//注册指令
Vue.use(directives)
//使用自定义指令
<button v-has></button>

小结

不一定所有的权限都可以使用自定义指令控制,建议存储一个按钮权限数组,使用v-if="[].includes()"来判断是否存在.
我这可能并不是最优的解决方法,但是在我的这个项目中我觉得是比较不错的解决方案,有更好的方案,欢迎指出.

声明:前端编程学习记录|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - vue自定义指令实现全局按钮权限控制.


行路有良友,便是捷径。带上我吧,一起去看更大的世界。