vue按钮级权限控制

梦幻空花~

于 2023-04-23 22:28:49 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38868959/article/details/130332178

版权

文章介绍了如何在Vue.js应用中实现路由权限控制，通过在路由元信息中定义权限列表，并使用自定义指令v-permission来控制按钮的显示，根据用户权限动态隐藏或显示按钮。同时，文章探讨了Vue生命周期中bind和inserted钩子函数的区别，它们都在DOM插入时被调用，但bind在父节点不存在时触发，而inserted在DOM已渲染后执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.路由：

 {
    path: '/permission',
    component: () => import('../views/permission/index.vue'),
    name: '权限测试',
    meta: { permissionList: ['add', 'edit'] }, //页面需要的权限
  }

2.页面权限控制

<template>
    <div>
        <h3>按钮权限</h3>
        <button v-permission="'add'">新增</button>
        <button v-permission="'edit'">编辑</button>
        <button v-permission="'delete'">删除</button>
    </div>
</template>
   
<script>
export default {
    name: 'permissionName',
    directives: {
        permission: {
            bind(el, binding, vnode) {
                const { value } = binding; // add/edit/delete
                const { permissionList } = vnode.context.$route.meta;
                if (permissionList.indexOf(value) === -1) {
                    el.style.display = "none"
                    //  el.parentNode.removeChild(el); 搭配inserted
                }
            }
        }
    }
}


</script>

3.总结：bind 和 inserted

共同点： dom插入都会调用，bind在inserted之前
不同点：
1.bind 时父节点为 null,inserted 时父节点存在。
2. bind是在dom树绘制前调用，inserted在dom树绘制后调用

bind: function (el) {
	console.log(el.parentNode)  // null
	console.log('bind')
},
inserted: function (el) {
   console.log(el.parentNode)  // <div class="directive-box">...</div>
   console.log('inserted')
}