• 售前

  • 售后

热门帖子
入门百科

Vue自界说v-has指令实现按钮权限判断

[复制链接]
休闲时光8882017 显示全部楼层 发表于 2021-10-26 12:50:02 |阅读模式 打印 上一主题 下一主题
应用场景


以后台管理体系为例,每个用户所拥有的按钮权限不一样。管理员设置权限之后,用户登录时,从接口拿到按钮权限列表,然后根据后台数据判断表现哪些按钮。
简朴说一下,自定义指令

Vue.js官网关于自定义指令的讲解
cn.vuejs.org/v2/guide/cu…
基础概念
Vue除了焦点功能默认内置的指令(v-model和v-show)还可以注册自定义指令。
在Vue2.0中,代码复用和抽象的重要情势是组件。但有的情况下,仍必要对平凡DOM元素进行底层操作,这时间就会用到自定义指令。
譬如,自定义一个v-focus指令,当页面加载时,输入框将得到焦点
  1. <input v-focus>
复制代码
全局自定义
  1. // 注册一个全局自定义指令 `v-focus`
  2. Vue.directive('focus', {
  3.   // 当被绑定的元素插入到 DOM 中时……
  4.   inserted: function (el) {
  5.     // 聚焦元素
  6.     el.focus()
  7.   }
  8. })
复制代码
局部自定义
  1. //如果想注册局部指令,组件中也接受一个 directives 的选项:
  2. directives: {
  3.   focus: {
  4.     // 指令的定义
  5.     inserted: function (el) {
  6.       el.focus()
  7.     }
  8.   }
  9. }
复制代码
钩子函数
一个指令定义对象可以提供如下几个钩子函数(均为可选)
bind
只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted
被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)
update
所在组件的VNode更新时调用,但是大概发生在其子VNode更新之前。指令的值大概发生了改变,也大概没有。但是你可以通过比力更新前后的值来忽略不必要的模板更新。
componentUpdated
指令所在组件的VNode及其子VNode全部更新后调用。
unbind
只调用一次,指令与元素解绑时调用。
其他
除此之外,尚有一些基础概念,钩子函数参数,动态指令参数,等等。
cn.vuejs.org/v2/guide/cu…
官网讲的非常清楚,在此不再多做赘述。
原理
如果对自定义指令的源码感兴趣,博客园也有一篇文章讲的很通透
https://www.jb51.net/article/209716.htm
原理就是:
       
  • 剖析Vue的属性的时间,遍历每个属性;   
  • 对象上增加一个directives属性生存指令信息;   
  • 渲染完成后会实验directives模块的create钩子函数;   
  • Vue 编译天生的假造节点,也就是VNode插入到父节点后,   
  • 依次实验每个函数,也就实验到我们自定义定义的inserted钩子函数了
自定义指令v-has


话休絮烦,言归正传。
本日重要是总结一下:自定义指令v-has,按钮权限判断
登录接口拿到按钮权限列表,存入本地缓存LOGIN_USER_BUTTON_AUTH中
数据格式如下:
  1. [
  2.     {
  3.         "checked":false,
  4.         "component":"",
  5.         "createTime":"2019-06-29 18:21:06",
  6.         "createUser":"026a564bbfd84861ac4b65393644beef",
  7.         "icon":"",
  8.         "id":"1503273153861066776",
  9.         "name":"今日采集(案卷)",
  10.         "open":"true",
  11.         "parentId":"2328050996633395469",
  12.         "parentName":"首页",
  13.         "permission":"sys:index:vol",
  14.         "sort":103,
  15.         "status":"0",
  16.         "type":"2",
  17.         "updateTime":"2021-01-27 15:51:15",
  18.         "updateUser":"026a564bbfd84861ac4b65393644beef",
  19.         "url":""
  20.     }
  21. ]
复制代码
自定义v-has指令的设置
在utils文件夹下,新建hasPermission.js文件,在index.js中同一导出
  1. const hasPermission = {
  2.     install (Vue, options) {
  3.         Vue.directive('has', {
  4.             inserted: (el, binding, vnode)=>{
  5.                 filterGlobalPermission(el, binding, vnode);
  6.             }
  7.         });
  8.     }
  9. };
  10. /**
  11. * 全局权限控制
  12. */
  13. export const filterGlobalPermission = (el, binding, vnode) => {
  14.     let permissionList = [];
  15.     let authList = JSON.parse(localStorage.getItem('LOGIN_USER_BUTTON_AUTH') || "[]");
  16.     for (let auth of authList) {
  17.         permissionList.push(auth);
  18.     }
  19.     if (!permissionList.length) {
  20.         el.parentNode.removeChild(el);
  21.         return;
  22.     }
  23.     let permissions = [];
  24.     for (let item of permissionList) {
  25.         permissions.push(item.permission);
  26.     }
  27.     if (!permissions.includes(binding.value)) {
  28.         el.parentNode.removeChild(el);
  29.     }
  30. }
  31. export default hasPermission;
复制代码
utils文件下的index.js
utils文件夹下的其他js文件也可以同一在index.js里导出
  1. import hasPermission from './hasPermission'
  2. export { hasPermission }
复制代码
main.js中引入
  1. import { hasPermission } from '@/utils'
  2. Vue.use(hasPermission)
复制代码
组件中使用v-has根据按钮权限,判断是否表现该按钮
  1. <el-button v-has="'sys:arch:add'" type="primary" size="mini" icon="el-icon-plus" @click="add('1')">
  2.     新增
  3. </el-button>
复制代码
总结

到此这篇关于Vue自定义v-has指令实现按钮权限判断的文章就先容到这了,更多相关Vue自定义v-has指令内容请搜索草根技能分享从前的文章或继承欣赏下面的相关文章渴望大家以后多多支持草根技能分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作