若依系统使用指令实现按钮级别的权限控制

最新推荐文章于 2025-07-23 15:25:54 发布

原创最新推荐文章于 2025-07-23 15:25:54 发布 · 3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍如何使用自定义Vue指令来实现基于角色和权限的UI元素显示控制。通过hasRole和hasPermi指令，可以根据用户角色及具体权限动态展示或隐藏页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

指令使用方法

<el-col :span="1.5">
  <el-button
    type="primary"
    plain
    icon="el-icon-plus"
    size="mini"
    @click="handleAdd"
    v-hasPermi="['system:role:add']"  # 指令字符
  >新增</el-button>
</el-col>

全局使用，main.js中定义方式

import directive from './directive' // directive
Vue.use(directive)
// 需要在new Vue之前完成

指令的定义

// hasrole
import store from '@/store'
export default {
  inserted(el, binding, vnode) { 
    // 获取绑定值
    const { value } = binding
    const super_admin = "admin";
    const roles = store.getters && store.getters.roles
    if (value && value instanceof Array && value.length > 0) {
      const roleFlag = value
      const hasRole = roles.some(role => {
        return super_admin === role || roleFlag.includes(role)
      })
      // 如果不存在角色，则从当前父节点删除
      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置角色权限标签值"`)
    }
  }
}

// hasPermi
import store from '@/store'
export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions
    if (value && value instanceof Array && value.length > 0) {
        const permissionFlag = value
      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })
      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

结论：实现的过程其实很简单的，用户设置某一个按钮具有的权限，后台返回菜单权限，存入store中，前端写代码需要控制的时候使用类似： v-hasPermi="['system:role:add']" 的自定义指令，当组件创建的时候，会根据这里的值"['system:role:add']" 筛选用户是否有权限，如果没有，会在insert生命周期中删除父节点下当前节点，代码如下：

el.parentNode && el.parentNode.removeChild(el)

详细的上述代码已经写了的，可以自己看。