vue项目自定义指令控制按钮权限

最新推荐文章于 2025-01-09 15:38:55 发布

v_loading

最新推荐文章于 2025-01-09 15:38:55 发布

阅读量355

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/v_loading/article/details/117331885

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过自定义指令实现按钮的权限控制。首先，展示了在`permission.js`文件中定义的自定义指令逻辑，接着说明了如何在`main.js`中全局引入这个指令，最后给出了在组件中如何使用该自定义指令来决定按钮是否显示。

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

自定义指令判断方法

permission.js

// permission.js
import Vue from 'vue';

// 是否有权限
const hasPermission = btnRoleList => {
    // 当前用户的权限列表
    let role = localStorage.getItem("role");
    return btnRoleList.some(e => role.includes(e));
    
		/* some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
		
		some() 方法会依次执行数组的每个元素：
		
		如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
		如果没有满足条件的元素，则返回false。 */
};

// 指令
const has =Vue.directive('permission', {
    inserted: (el, binding, vnode) => {
        console.log('directive自定义指令',el.parentNode,el, binding, vnode)
        if (!hasPermission(binding.value)) {
            el.parentNode.removeChild(el);
        }
    }
});

// 全局判断方法
Vue.prototype.$_has = hasPermission;
export {has};

全局引入

main.js

  import has from '@/utils/permission'

使用

 <el-button type="primary" icon="el-icon-plus" @click="handleAdd" size="small" 
 v-permission="['admin','root','project','operate','mintain','normal']">
              新增</el-button>