自定义按钮指令

1，明确后台返回的按钮权限格式，我这边的格式是：

permissionBtn：["infoAdd"，"infoExport"，"infoDel"]

2,在登录的时候将数据存放在状态管理里面去：

commit('PERMISSION_BTN', permissionBtn)

当然，这是在登陆后查询用户的情况下获取的，如果你是在登录的时候获取的，得把数据存在本地。否则的话，页面刷新存放在vuex里面的权限列表会被格式化。存放数据如下：

setStorage('PermissionBtn', JSON.stringify(permissionBtn))

3,创建一个hasPermission.js文件，里面内容如下：

import Vue from 'vue'
import store from '@/store'
// import { getStorage } from '@/utils/storage'

const permissionBtn = Vue.directive('per', {
  inserted: function (el, binding, vnode) {
    if (!Vue.prototype.$PERMISSION(binding.value)) {
      el.remove()
    }
  }
})

Vue.prototype.$PERMISSION = function (value) {
  let isPermission = false
  const buttonPermission = store.state.user.permissionBtn // 存放在vuex的写法
  // const buttonPermission = getStorage('PermissionList') // 存放在本地存储的写法
  if (buttonPermission === undefined || buttonPermission === null) {
    return false
  }
  try {
    const targetArr = value.split(',')
    for (let i = 0; i < targetArr.length; i++) {
      if (buttonPermission.includes(targetArr[i])) {
        isPermission = true
        break
      }
    }
    return isPermission
  } catch {
    console.log('error')
    isPermission = false
    return isPermission
  }
}

export {
  permissionBtn
}

4，在main.js中引入，引入地址依情况而定。

import './hasPermissionbtn'

5，直接在页面中使用，可以在任何标签中使用：

<btn buttonname='按钮' v-per="'infoAdd'" />

如果是多个权限或控制按钮时通过 “，”隔开v-per=" 'infoAdd，infoedit ' "，表示权限里面有"infoAdd"或者"infoedit"都显示该按钮。

猜你喜欢