2 21.v permission指令按钮级权限控制

• 封装按钮级权限

src/directives/permission.js

格式: ruleNames: [] ---> ['getStatistics1,GET', 'getStatistics3,POST']

import store from "~/store"

function hasPermission(value, el = false){
    console.log(value,el)
    if(!Array.isArray(value)){
        throw new Error(`需要配置权限,例如 v-permission="['getStatistics3,GET']"`)
    }
    const hasAuth = value.findIndex(v=>store.state.ruleNames.includes(v)) != -1
    if(el && !hasAuth){
        el.parentNode && el.parentNode.removeChild(el)
    }

    return hasAuth
}   


export default {
    install(app){
        app.directive("permission", {
            mounted(el, binding){
                hasPermission(binding.value, el)
            },
        })
    }
}

• 入口文件导入

  main.js

import permission from "./directives/permission"
app.use(permission)

• 调用示例

<IndexChart v-permission="['getStatistics3,GET']"></IndexChart>