按钮权限控制

搜索关键字：

自定义指令传参| +"自定义指令"+"dataset"|自定义指令dataset| +"Vue"+"directives"|vue按钮权限实现

1、完整代码：

<template>

    <div>

        <el-breadcrumb separator-class="el-icon-arrow-right">

            <el-breadcrumb-item>报表管理</el-breadcrumb-item>

            <el-breadcrumb-item>折线图</el-breadcrumb-item>

        </el-breadcrumb>

        <el-card>

            <el-row type="flex" justify="center" style="margin-top:20px">

                <el-col :push="12" :span="12">

                    <el-button type="primary" v-btnOp = "{name:'BtnAdd',loadOps:ops}">新增</el-button>

                    <el-button type="success" v-btnOp = "{name:'BtnExp',loadOps:ops}">导出</el-button>

                    <el-button type="info" v-btnOp = "{name:'BtnPrint',loadOps:ops}">打印</el-button>

                    <el-button type="warning" v-btnOp = "{name:'BtnShare',loadOps:ops}">分享</el-button>

                </el-col>

            </el-row>

        </el-card>

    </div>

</template>

<script>

export default {

    data() {

        return {

            // 用户ID

            userpx: '',

            // 页面ID

            pageID: '',

            // 操作权限加载标志

            loaded: false,

            // 操作权限

            ops: []

        }

    },

    created() {

        this.getUserIDPageID();

    },

    methods: {

        // 获取登录用户ID+页面ID

        getUserIDPageID() {

            this.pageID = this.$route.query.id;

            console.log("页面ID",this.pageID);

            if(sessionStorage.getItem("user") !== null) {

                let user = JSON.parse(sessionStorage.getItem("user"));

                this.userpx = user.id;

                console.log("用户ID",this.userpx);

            }

        },

        // 加载操作权限

        loadAssignedOps() {

            this.$axios.get("/api/operation/assignedops",{

                params: {

                    userpx: this.userpx,

                    pageID: this.pageID

                }

            })

            .then( res => {

                console.log("获取操作权限返回数据：",res.data);

                this.ops = res.data.data;

                console.log("看一下操作数组ops:",this.ops);

                console.log("包括BtnShare:",this.ops.includes("BtnShare"));

            })

            .catch( function(error) {

                console.log(error);

            });

        }

    },

    watch: {

        userpx: function(data) {

            if(this.loaded) {

                return;

            }            

            console.log("userpx有值了：,在看一下this.pageID",data,this.pageID);

            if(this.pageID ) {

                this.loaded = true;

                this.$nextTick( () => {

                    this.loadAssignedOps();

                })                

            }

        },

        pageID: function(data) {

            if(this.loaded) {

                return;

            }

            console.log("pageID有值了：,再看一下this.userpx",data,this.userpx);

            if(this.userpx) {

                this.loaded = true;

                this.$nextTick( () => {

                    this.loadAssignedOps();                    

                })                

            }

        }

    },

    directives: {

        "btnOp": {

            componentUpdated: function(el,binding,vnode) {

                console.log("改进之后binding.value.name",binding.value.name);

                console.log("改进之后binding.value.loadOps",binding.value.loadOps)

                let ops = binding.value.loadOps;

                console.log("看一下Ops是否包括按钮值：",ops.includes(binding.value.name),binding.value.name);

                if( ops != null && !ops.includes(binding.value.name)) {

                    el.parentNode.removeChild(el);

                }

            }

        }

    }

}

</script>

<style lang="scss" scoped>

.el-breadcrumb {

    margin-bottom: 15px;

    font-size: 12px;

}

.el-card {

    box-shadow: 0 1px 1px rgba(0,0,0,0.15);

}

</style>

2、后台接口"/api/operation/assignedops"

返回实际数据：

[

    "BtnShare",

    "BtnExp",

    "BtnPrint"

]

3、判断页面按钮是否在返回值里面

<el-button type="success" v-btnOp = "{name:'BtnExp',loadOps:ops}">导出</el-button>

4、效果图：