权限按钮

权限按钮

引用

// 引入权限按钮文件
import { hasPermission } from '../src/directive/btnPermission/btnPermission.js'// 按钮权限指令

Vue.use(hasPermission) // 按钮权限指令

引入的文件

export const hasPermission = {
  install(Vue) {
    Vue.directive('hasPermission', {
      bind(el, binding, vnode) {
        const permissionsNameList = JSON.parse(localStorage.getItem('buttonCode'))
        // console.log(permissionsNameList, 'permissionsNameList')

        const permissions = Object.keys(permissionsNameList)
        // console.log(permissions, 'permissions')
        const value = binding.value
        // console.log(value, 'value')
        let flag = true
        for (const v of value) {
          if (!permissions.includes(v)) {
            flag = false
          }
        }
        if (!flag) {
          if (!el.parentNode) {
            el.style.display = 'none'
          } else {
            el.parentNode.removeChild(el)
          }
        }
      }
    })
  }
}

使用方法

<el-button v-hasPermission="['ehome_b_CourseSystemconfig']" type="text" @click="goToSetUp(scope.row)">资源</el-button>

后端返回数据结构