自定义指令v-permission进行权限控制

对柱状图进行权限控制，没有权限则不显示

创建directives文件夹 建立permission.js

自定义指令官方说明

main.js中引入 在createApp之后

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

根据数组来判断，登录用户后会请求一个权限数组保存到store中

数组中有各种功能权限的别名

permission.js

import store from "@/store"
function hasPermission(value,el = false){
  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",{
      // el当前节点 binding可以获取当前数组的值 
      mounted(el,binding) {
          // 传入数组和节点
          hasPermission(binding.value,el) 
      },
    })
  }
}

echarts报错 需要加个判断

  onMounted(()=>{
    var chartDom = document.getElementById('chart');
    // 存在才获取数据
    if(chartDom){
      myChart = echarts.init(chartDom);
      getData()
    }

  })

随便修改一下

柱状图部分成功不显示