hasPermission.js 1.0 KB

12345678910111213141516171819202122232425262728
  1. import Vue from 'vue'
  2. import store from '@/store'
  3. /**
  4. * hasPermission 权限指令
  5. * 指令用法:
  6. * - 在需要控制 hasPermission 级别权限的组件上使用 v-hasPermission:[method] , 如下:
  7. * <i-button v-hasPermission:add >添加用户</a-button>
  8. * <a-button v-hasPermission:delete>删除用户</a-button>
  9. * <a v-hasPermission:edit @click="edit(record)">修改</a>
  10. *
  11. * - 当前用户没有权限时,组件上使用了该指令则会被隐藏
  12. * - 当后台权限跟 pro 提供的模式不同时,只需要针对这里的权限过滤进行修改即可
  13. *
  14. * @see https://github.com/sendya/ant-design-pro-vue/pull/53
  15. */
  16. const hasPermission = Vue.directive('hasPermission', {
  17. inserted: function (el, binding, vnode) {
  18. // console.log(binding.value)
  19. const roles = store.getters.roles
  20. const permissionList = roles.permissionList
  21. if (!permissionList.includes(binding.value)) {
  22. el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
  23. }
  24. }
  25. })
  26. export default hasPermission