权限

hasRole

根据角色标识，动态控制 DOM 元素的显示/隐藏。

import { useUserStore } from '@/store/modules/user'

export default {
  mounted(el: HTMLElement, binding: DirectiveBinding<string[]>) {
    const { value } = binding
    const { roles } = useUserStore()

    if (value && Array.isArray(value) && value.length > 0) {
      const roleFlag = value

      const hasRole = roles.some((role) => {
        return role === 'superadmin' || role === 'admin' || roleFlag.includes(role)
      })

      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置角色权限标签值`)
    }
  },
}

使用：

<button v-role="['editor']">编辑</button>

• roles来自用户的后台数据库

• v-hasRole希望得到的输入是字符串数组，表示当前DOM元素需要的roles

hasPermi

import { useUserStore } from '@/store/modules/user'

export default {
  mounted(el: HTMLElement, binding: DirectiveBinding<string[]>) {
    const { value } = binding
    const allPermission = '*:*:*'
    const { permissions } = useUserStore()

    if (value && Array.isArray(value) && value.length > 0) {
      const hasPermissions = permissions.some((permission) => {
        return allPermission === permission || value.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  },
}

判断输入的权限permissions当前用户是否存在。