vue自定义指令实现按钮界别权限管理

在后台管理系统中，每个用户权限都往往需要严格分配，某些可能只具有某个列表的查看功能而没有编辑功能，这就需要对后台管理系统的每个按钮进行权限管理

自定义指令管理权限原理：
1、自定义指令，根据标签参数实现对当前标签隐藏和显示
2、登录时获取按钮权限列表

步骤

1、创建v-auth 自定义指令

import Vue from 'vue'
import store from '@/store'const directive = Vue.directive('auth', {inserted: (el, binding) => {let auth = `${binding.value.role}_${binding.value.type}`  //获取当前路由位置/按钮类型let roles = store.getters['setting/getRoles']             //获取按钮权限对象if (!(roles.indexOf(auth) !== -1) && el.parentElement) {   //如果不存在当前对象则删除当前按钮el.parentElement.removeChild(el)}}
})

2、在main.js 引入

3、在按钮使用自定义指令：

<button  v-auth="{role: $route.meta.role, type: 'DEL'}">

vue自定义指令实现按钮界别权限管理相关推荐

Vue自定义指令实现按钮级权限
在很多后台管理系统中,常常需要做按钮权限控制. 当然我们可以使用v-if来实现,不过这样做,每个页面都要获取一次权限信息,代码往往很冗余. 接下来我们将封装自定义指令,来实现按钮级的权限控制. 一.先 ...
koa mysql 按钮级权限_Vue 指令实现按钮级别权限管理功能
在项目中经常有需求要根据用户的权限对界面上的元素进行控制,这里介绍了一直简单的实现,仅供参考. 当前用户的权限列表储存在 store 里,也可以是其他地方. 指令 // src/directives/ ...
Vue 进阶系列丨自定义指令实现按钮权限功能
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
vue自定义指令directives实现自动点击事件及自动点击第一个按钮
业务场景:点击弹窗默认加载第一个按钮的数据.vue自定义指令directives实现这个需求目录自动点击所有的按钮. 自动点击第一个按钮, 自动点击所有的按钮. <ul class=&quo ...
Vue使用自定义指令实现按钮防抖功能，防止多次调接口
首先什么是防抖? 防抖就是指☞触发事件后在n秒内函数只执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间.说到防抖大家应该会想到节流,两者cp哈哈哈. 主要应用场景有: a.scroll事件 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
超实用：Vue 自定义指令合集
大家好,我是漫步前面我已经分享过一篇"分享8个非常实用的Vue自定义指令"文章,里面教了大家如何使用自定义指令,以及几个使用的指令,下面这篇文章也是类似内容,希望你会喜欢.记得查 ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...

vue自定义指令实现按钮界别权限管理

步骤

vue自定义指令实现按钮界别权限管理相关推荐

最新文章

热门文章