权限按钮组件实现

场景

页面中的按钮, 需要根据登录用户进行权限控制.

1. 一个表格为主的页面中, 有 “添加”,”修改”,”删除” 三个按钮, 对于管理员等高级用户, 给与增删权限, 对于普通用户, 只有更改权限.
2. 一些按钮内嵌在表格组件的某一列中, 也需要进行控制.
3. 无权限的按钮不可以渲染.
4. 系统使用 Vue-router 进行路由管理

解决方法

由于是对现有系统进行更改, 因此尽量选择对代码更改最少得办法.

1. 创造一个新的带权限按钮组件 ‘permi-button’, 该组件接收两个参数, 一个是该按钮功能的权限编码, 一个是控制方式(可以控制不可用还是不显示)
2. 在用户登录后, 获取页面路由表时, 携带上每个页面上的权限列表.
3. 按钮组件根据当前路由, 得到用户拥有的当前页面权限, 与组件的权限编码进行比较, 从而选择是否显示(是否可用)
4. 对于没有设定权限参数的按钮, 就默认显示即可.

示例代码

只要将该组件的导出名字替代项目中所有的按钮组件名称, 即可. 由于属性的透传, 原先组件的参数会传递到新组件中的 el-button, 也不会影响之前的功能.

<template>
  <el-button v-if="isVisible">
    <slot name="default"></slot>
  </el-button>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { computed, defineProps } from 'vue'
import { ElButton } from 'element-plus'

const props = defineProps({
  permiId: {
    type: Number
  }
})

const buttons = useRoute().meta?.buttons as number[]
const isVisible = computed(() => {
  // 如果 premiId 为空, 则返回 true
  if (!props.permiId) {
    return true
  }
  let flag = false
  // buttons 可能为空
  if (buttons) {
    flag = buttons.includes(props.permiId)
  }
  return flag
})
</script>