• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue 按钮 权限控制介绍

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言:

在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限。必须当有删除权限时,就显示删除按钮。没有这个权限时,就不显示或者删除这个按钮。通过查找资料,通过vuex来实现这个功能。

一、步骤

1.定义buttom权限

state中创建buttomPermission,用于保存后台接口返回的权限数据。

setPermission用于接受数据,将页面权限管理传入到buttomPermission对象中。

使用vuex:

Vue.use(Vuex)

创建vue实例
const store = new Vuex.Store({
    state: {
        buttomPermission: {}
    },
    mutations: {
        setPermission(state, permission) {
            state.buttomPermission = permission
        }
    }
})
export default store


2.定义store

import store from './store/index.js'

new Vue({
    store,
    el: '#app',
    render: h => h(App)
})


3.创建permission指令

新建directives文件夹,创建permission.js文件。

这里使用inserted函数,在被绑定元素插入父节点时检测该元素是否有权限。

inserted( el, bindings, vnode ) { }


4.使用permission指令

在按钮页面引入和定义 permission指令,并且在buttom中写入指令,绑定指令中相对于的值。

 <button v-permission="'add'">添加</button>
import permission from './directives/permission'
directives: {permission,},


5.删除无权限数据

permission指令,通过bindings获取该按钮绑定的value值,然后在buttomPermission对象中找到,然后判断是否有权限,如果没有权限,则删除该节点。

inserted(el, bindings, vnode) {
        let btnPermissionValue = bindings.value;
        let boolean =vnode.context.$store.state.buttomPermission[btnPermissionValue];
        !boolean && el.parentNode.removeChild(el);
    }


6.传入状态管理数据

将状态管理数据,通过setPermission方法传入到权限管理中

let permissions = {}
this.$store.commit("setPermission", permissions);


二、概况

总的来说,就是通过vuex定义一个buttomPermission权限状态对象,然后再创建一个permissions指令,通过对每个buttom按钮使用permissions指令,并且绑定该按钮特定意义的值。然后在permission.js文件中,获取当前value值,从buttomPermission中得到当前按钮是否有权限,没有则直接删除掉当前按钮节点。

到此这篇关于vue 按钮 权限控制介绍的文章就介绍到这了,更多相关vue 按钮 权限控制内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript 微任务和宏任务讲解发布时间:2022-02-05
下一篇:
vue3.0安装Element ui及矢量图使用方式发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap