vue 中 根据权限进行按钮级别的控制

需求：比如页面上有三个按钮，分别为 创建、编辑、删除，不同的角色能看到的按钮不同

实现：vue项目中可以通过自定义指令

一般会把用户的部分信息保存在localStorage里面：

userInfo	{ role:0,…}

1. 在src目录下创建 directives文件夹 —>新建文件btnPermiss.js 按钮权限

// btnPermiss.js
export default {
    bind(ele,bindings){//ele：为绑定的元素标签    bindings：绑定相关的信息
        const permissions = []
        const role = JSON.parse(localStorage.getItem('userInfo')).role
        switch(role){
            case 0:
                permissions = ['create'];
                break;
            case 1:
                permissions = ['create','edit'];
                break;
            case 2:
                permissions = ['create','edit','delete'];
                break;
            case 3:
                permissions = ['delete'];
                break;
            default:
                permissions = []
        }
        const hasPemission = permissions.includes(bindings.value)//bindings.value为使用指令时的 指令值（'create','edit','delete' 这三种可能）
        if(!hasPemission){//页面中默认三个按钮都展示，没有相应权限时，删除此按钮
           // ele.parentNode.removeChild(ele) 会报错，找不到节点，因为bind函数执行的时候，页面节点还没有完全挂载完,利用宏任务解决：
            setTimeout(()=>{
                ele.parentNode.removeChild(ele)
            },0)
        }
        
    }
}

指令使用：

<script>
 import hasDirective from '/src/directives/btnPermiss'
 export default {
     data(){
         
     },
     directives:{
         has:hasDirective  //has 既可以使用v-has指令
     }
 }
</script>
<template>
	<el-button v-has="create">创建</el-button>
    <el-button v-has="edit">编辑</el-button>
    <el-button v-has="delete">删除</el-button>
</template>