从架构去思考按钮权限控制

分析所有需求

其实按钮控制还是很简单，并且网上也有许多解决方案，我这里主要是分享一下自己实现的一个过程

我主要分为

• 注册按钮
• 菜单控制按钮
• 角色控制控制菜单已有按钮
• 路由对比当前页面按钮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>