element 按钮权限控制（非常简单）

最新推荐文章于 2026-05-04 07:53:24 发布

原创最新推荐文章于 2026-05-04 07:53:24 发布 · 3.4k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

4 篇文章 0 人学习

订阅专栏查看详情

element

当前文章被收录于：

element

3 篇文章 0 人学习

订阅专栏查看详情

按钮动态权限

当前文章被收录于：

按钮动态权限

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Vue项目中实现基于角色的按钮权限控制。通过在main.js中添加自定义指令，利用sessionStorage缓存按钮权限，实现对页面按钮的动态显示与隐藏。具体包括：封装权限指令、页面处理及按钮权限实现。

1.后台缓存按钮

后台封装结构形式

role : [ "role_search", "role_add", "role_edit", "role_delete", "role_flow" ]

在main.js中添加指令

/** 权限指令**/
Vue.directive('has', {
  inserted(el, binding) {
  //获取缓存的按钮数组
    const data = sessionStorage.getItem('button')
    var array = JSON.parse(data)
    const str = binding.value.split('_')
    // 不存在则隐藏
    if (array === null || array[str[0]] === undefined || array[str[0]].indexOf(binding.value) === -1) {
      // el.parentNode.removeChild(el);
      el.style.display = 'none'
    }
  }
})

页面处理

<el-button
            v-has="'role_add'"  //指令实现  
            size="mini"
            icon="el-icon-plus"
            type="primary"
            @click="handleShow"
          >添加</el-button>

按钮权限实现完成