Vue项目按钮权限控制
从架构去思考按钮权限控制
分析所有需求
其实按钮控制还是很简单，并且网上也有许多解决方案，我这里主要是分享一下自己实现的一个过程
我主要分为
注册按钮
菜单控制按钮
角色控制控制菜单已有按钮
路由对比当前页面按钮KEY实现控制
1.1 注册按钮
我这里是在字典表配置按钮 有按钮名以及按钮KEY等字段
方案一：在页面中我们用组件去注册按钮以及按钮
<!-- auth对应在配置中添加的KEY 名字尽量和配置表统一--> <BtnAuth auth="UPDATE_BUTTON"> <el-button size="mini" type="primary">编辑</el-button> </BtnAuth> 复制代码
方案二： 把所有配置表中的按钮注册成组件
/** * 我的思路是通过一个组件容器包裹所有按钮 * 页面中需要传入一个组件对应的key 以及该按钮调用的方法 * 这样做可以统一控制名字都可以通过字典中去更改 * 因为时间原因没有采取这种方案 主要也是怕出问题 因为已经上线了 */ <BtnAuth auth="UPDATE_BUTTON" v-on={xxxxx}> </BtnAuth> 复制代码1.2 菜单控制按钮
这个没啥好说的
1.3 角色控制控制菜单已有按钮
xxxx
1.4 路由对比当前页面按钮KEY实现控制
这个步骤就是核心了 逻辑基本上都是这里实现的
<script> import { usePermission } from '@/hooks/usePermission' const isTextMatch = false // 是否使用文字匹配 export default { name: 'BtnAuth', props: { auth: { type: String | Array, default: () => [] } }, render() { const slot = this.$slots?.default || null const { hasPermission } = usePermission() if (!slot) return null const btnText = slot?.componentOptions?.children[0]?.text let authdef = null if (btnText && isTextMatch) { authdef = { 添加: 'INSERT_BUTTON', 编辑: 'UPDATE_BUTTON', 删除: 'DELETE_BUTTON', 审核: 'AUDIT_BUTTON' }[btnText] } return hasPermission(authdef || this.auth) ? slot : null } } </script>
作者：前端小白ggg
链接：https://juejin.cn/post/7023645970718162952