vue实现简单权限按钮

1.先在mian.ts创建一个全局方法

2.用户点击登录后把后端返回的用户权限存储在pinia里

3.自定义一个名叫permission的指令 ，里面写一个mouthed生命周期函数，在mounted中会获取到2个参数，el当前元素的dom，binding源对象， 

4.取出pinia的用户权限数据

5.判断目前绑定对象的值是否存在用户权限数据里

6.如果不存在就使用el.remove()删除节点

7 .在需要判断权限的按钮上使用v-permission自定义指令， 

 //mian.ts

app.directive("permission",{                //permission 自己定义名字

    mounted(el,binding){     //el当前绑定的值，

        let val=binding.value

    

        console.log(val);   //绑定目标对象的值 

       

        const store=useLoginStore()          //用户登录后后台返回用户权限信息 存储在pinia里

        var permission=store.user.perms || []  //防止空指针异常

        console.log(permission);

        if(-1===permission.indexOf(val)){        //判断当前绑定的值是否存在用户权限数字里

            el.remove?.()                //不存就销毁当前节点

        }

    }

})

在组件页面 使用

//home.vue 

使用  v-permission=" 'product:product:create' "  绑定当前按钮的值

<el-button size="small" @click="handleEdit(scope.$index, scope.row)"

 v-permission="'product:product:edit'">编辑</el-button>