vue前端按钮权限,vue控制权限
本文主要介绍Vue自定义v-has指令实现按钮权限判断的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
应用场景
以后台管理系统为例，每个用户都有不同的按钮权限。配置好管理员权限后，用户登录时从界面获取按钮权限列表，然后根据后台数据判断显示哪些按钮。
简单说一下，自定义指令
Vue.js官网对自定义说明的解释
cn.vuejs.org/v2/guide/cu…
基础概念
除了核心功能的默认内置指令(v-model和v-show)，Vue还可以注册自定义指令。
在Vue2.0中，代码复用和抽象的主要形式是组件。但是，在某些情况下，仍然需要在底层操作常见的DOM元素，然后将使用自定义指令。
例如，自定义一个v-focus命令，当页面加载时，输入框将获得焦点。
输入垂直焦点
全局自定义
//注册一个全局自定义指令“v-focus”。
Vue.directive(focus ，{
//当绑定元素插入DOM时.
插入：函数(el) {
//焦点元素
焦点()
}
})
局部自定义
//如果要注册本地指令，该组件还接受一个指令选项：
指令：{
焦点：{
//指令的定义
插入：函数(el) {
焦点()
}
}
}
钩子函数
指令定义对象可以提供以下钩子函数(都是可选的)
bind
当指令第一次绑定到元素时，只调用一次。可以在这里执行一次性初始化。
inserted
当绑定元素插入父节点时调用(只存在父节点，但不一定插入到文档中)
update
当组件的VNode更新时调用，但它可能发生在其子VNode更新之前。指令的值可能已更改，也可能未更改。但是您可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated
指令所在组件的VNode及其子VNode都被更新和调用。
unbind
当指令与元素解除绑定时，只调用一次。
其他
除此之外，还有一些基本的概念，比如钩子函数参数，动态指令参数等等。
cn.vuejs.org/v2/guide/cu…
官网说的很清楚了，这里就不赘述了。
原则
如果你对自定义指令的源代码感兴趣，Blog Park里还有一篇文章非常透明。
https://www.jb51.net/article/209716.htm
原则是：
解析Vue的属性时，遍历每个属性；
在对象上添加一个指令属性以保存指令信息；
directives模块的create hook函数将在渲染后执行；
Vue编译生成的虚拟节点即VNode插入父节点后，
依次执行每个函数，就会执行到我们自定义的插入钩子函数。
自定义指令v-has
别说了，说正事吧。
今天主要总结一下：自定义命令v-has，按钮权限判断。
接口登录获取按钮权限列表，并存储在本地缓存LOGIN_USER_BUTTON_AUTH中。
数据格式如下：
[
{
checked:false，
组件“:”，
create time : 2019-06-29 18:21:06 ，
create user : 026 a 564 bbfd 84861 ac4b 65393644 beef ，
图标“:”，
id:1503273153861066776 ，
名称:今天的集合(案例文件)，
open:true ，
parentId:2328050996633395469 ，
ParentName :主页，
权限: sys:index:vol ，
排序:103，
状态: 0 ，
类型: 2 ，
更新时间: 2021-01-27 15:51:15 ，
update user : 026 a 564 bbfd 84861 ac4b 65393644 beef ，
url“:”
}
]
自定义v-has指令的配置
在utils文件夹下，创建一个新的hasPermission.js文件，并将其导出到index.js中
const hasPermission={
安装(Vue，选项){
Vue.directive(has ，{
已插入：(el，binding，vnode)={
filterGlobalPermission(el，binding，vnode)；
}
});
}
};
/**
* 全局权限控制
*/
export const filterGlobalPermission=(El，binding，vnode)={
let权限列表=[]；
设authList=JSON。解析(本地存储。getitem( log in _ USER _ BUTTON _ AUTH ) [])；
for (let auth of authList) {
许可列表。推送(auth)；
}
如果(!permissionList.length) {
埃尔。父节点。删除子项(El)；
返回；
}
let permissions=[]；
对于(权限列表的让项){
权限。推(项。许可)；
}
如果(!权限。包括(绑定。值)){
埃尔。父节点。删除子项(El)；
}
}
导出默认有权限
utils文件下的index.js
实用工具文件夹下的其他射流研究…文件也可以统一在索引。射流研究…里导出
导入具有来自的权限 hasPermission
导出{ hasPermission }
主页。射流研究…中引入
从" @/实用工具"导入{ hasPermission }
Vue.use(有权限)
组件中使用v-has根据按钮权限，判断是否显示该按钮
El-button v-has= sys:arch:add type= primary size= mini icon= El-icon-plus @ click= add( 1 )
新增
/el-button
总结
到此这篇关于某视频剪辑软件自定义v-has指令实现按钮权限判断的文章就介绍到这了，更多相关某视频剪辑软件自定义v-has指令内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。