按钮权限控制

基本实现

登录阶段用户账号请求返回按钮权限codelist,格式一般为string[]

["app#admin.delete"]

将codelist存储在store

进入某个页面根据权限渲染按钮权限

方法一（使用v-if判断方法）

html
<el-button type="primary" v-if="hasPermi(value)">新增数据</el-button>

script
hasPermi(value) {
    //判断是否有权限return boolean
}

方法二（使用自定义指令）(rouyi)

/src/directive/permission/hasPermi.js

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

 export default {
   mounted(el, binding, vnode) {
     const { value } = binding
     const all_permission = "*:*:*";
     const permissions = useUserStore().permissions

     if (value && value instanceof Array && value.length > 0) {
       const permissionFlag = value
      // Array.some((value) => {})  判断数组中是否有满足条件的value,返回true,false
       const hasPermissions = permissions.some(permission => {
        // Array.includes(value)  查找是否存在与value相同值,返回true,false
         return all_permission === permission || permissionFlag.includes(permission)
       })

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

/src/directive/index.js

//import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'

export default function directive(app) {
  //app.directive('hasRole', hasRole)
  app.directive('hasPermi', hasPermi)

}

main.js

import directive from './directive' // directive

//注册指令
directive(app)

在使用的页面

html

<el-button type="primary" icon="plus" v-hasPermi="['system:dict:add']">新增数据</el-button>