Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
687 views
in Technique[技术] by (71.8m points)

vue 判断用户是否有该功能权限(例如编辑删除)

如题,想要根据接口返回的权限数组判断当前用户是否拥有该功能的权限 如果没有就隐藏table中该功能,想知道怎么实现
朋友提出一个办法:
可以将权限清单放到顶层组件中(provide),页面使用 (inject),或者做个全局minxes ,页面直接 v-if="[...].includes('key')"


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

我的做法是通过指令实现,我个人觉得控制显隐不太友好,可能会让人觉得是没有该功能,而不是自己的权限不足所导致,我的处理是置灰并文字提示
<el-button v-perm="$hasPerm('info:add')">新建</el-button>
$hasPerm是挂载到全局的判断方法,判断当前权限是否在权限数组中,返回一个布尔值
v-perm是自定义的指令
实现效果如图
20200709150304.jpg

v-perm指令代码如下,代码只做了el-button的处理

export default {
  inserted(el, binding) {
    if (!binding.value) {
      const cover = document.createElement('div')
      el.parentNode.replaceChild(cover, el)
      cover.appendChild(el)
      // el-button的处理
      if (hasClass(el, 'el-button')) {
        addClass(el, 'is-disabled')
        // 使用innerHTML,会移除所有事件,即无权限时所有事件交互无效
        const res = Vue.compile(`<el-tooltip class="item" effect="dark" content="权限不足,请联系管理员" placement="top-start">
           ${cover.innerHTML}
        </el-tooltip>`)
        const Tooltip = Vue.extend({
          render: res.render
        })
        const tooltipIns = new Tooltip().$mount()

        empty(cover)
        cover.parentNode.replaceChild(tooltipIns.$el, cover)
      }
    }
  }
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...