我要评论经常做中后台系统，此类系统的权限是比较重要，拿自己做过的一些项目做个笔记。
vue实现的中后台管理系统。按钮操作权限的空置一般都是通过自定义指令vue.directive。
<el-button v-has="fq-pms" type="primary">按钮</el-button>
通常我们会把从后台请求过来的数据存贮到vuex或localstorage，接下来我们先注册一个全局自定义指令并监控它
vue.directive('has',{
bind:function(el,binding){
const permissons = ['lcj'] //指令列表
if (has(binding.value, permissions)) {
el.parentnode.removechild(el);//调用元素父级删除，有时候父元素未渲染出来可以把bind换成inserted
}
}
})
has函数
function has(value, permissions) {
let isexist = true;
if (permissions === undefined||permissions===null || permissions.length === 0) {
return true;
}
for (let i = 0; i < permissions.length; i++) {
if (permissions[i] === value) {
isexist = false;
break;
}
}
return isexist;
}
bind是vue.directive的五个生命周期(钩子函数)，按照生命周期 bind>inserted>update>componentupdate>unbind
- bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
- update:所在组件的 vnode 更新时调用，但是可能发生在其子 vnode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
- componentupdate:指令所在组件的 vnode 及其子 vnode 全部更新后调用
- unbind:只调用一次，指令与元素解绑时调用
一般是通过操作权限是通过按钮的，菜单权限是通过前端路由和后台路由来判断的。下章会介绍vue-router配置后台路由实现菜单权限的
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论