vue自定义权限指令

1. 定义v-hasPermi指令

 /**
 * v-hasPermi 操作权限处理
 */
 
import useUserStore from '@/store/modules/user'

export default {
  mounted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = useUserStore().permissions；
    //permission为数组，在系统登录后获取保存至vueX中

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

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

接口返回的permissions的格式

permissions: [
        "plan:planadd:add",
        "plan:planadd:edit",
        "performance:plan:add",
        "performance:plan:edit",
        "system:role:submit",
        "performance:plan:list",
        ]
        

2. 注册指令
   在index.js文件中

import hasPermi from './permission/hasPermi'

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

3. 挂载安装指令

/*
* main.js文件
*/
import { createApp } from 'vue'
import directive from './directive' // directive

const app = createApp(App)
directive(app)

4.在项目中使用

 <el-button
              type="primary"
              @click="addTable(scope)"
              :disabled="btnDis"
              v-hasPermi="['deptManage:yearDispatch:add']"
              >添加</el-button
            >