前言
大家好，截至目前大厂中常用的六大vue自定义指令我们已经搞了四个了，今天就
来继续搞六大常用指令中的第五个指令 - 权限校验之v-permission。
在我们日常开发中权限校验是必不可少的一个环节，尤其是对于一些应用系统或一些中后台的开发，更是需要用到权限校验的。那么权限校验也有很多种类，比如菜单权限、组件权限甚至是小到元素权限等等，本文我们就将以元素权限为例，实现一个简单的权限校验自定义指令。
在有一些场景中我们可能会根据用户登录后所拥有的权限来决定哪些元素该显示，哪些元素不该显示。比如我们最常使用的就是增删改查操作，那么对于管理员来说权限很大，增删改查都有权限操作，而对于普通用户来说可能只有查询操作，这个时候就需要根据不同用户权限来决定元素的显示和隐藏了。
接下来我们就一起来分析一下如何实现一个元素权限校验的自定义指令
思路分析
- 首先因为会涉及到元素的展示和隐藏操作，所以在我们自定义指令时就不能再用beforeMount钩子函数了，而是需要用mounted函数，也就是说等元素渲染后再去控制是否展示。
- 在mounted函数中，我们首先需要获取登录用户所拥有的权限。一般情况下在用户登录后会去请求服务器获取用户权限，然后再把权限数据保存在vuex中。这里我们要做的就是把权限数据从vuex中解析出来，便于后续使用。（为了方便展示，我们就直接使用字符串代替了）
- 权限数据拿到以后，我们还需要判断当前元素需要哪些权限，比如删除按钮需要的就是对应的删除权限，而这个权限在元素被定义时就应该已经确定了，所以我们应该在对应的元素中把需要的权限传给我们的自定义指令，然后再通过binding.value拿到该权限
- 最后就是对比校验，看看当前元素所需要的权限是否存在于用户的权限列表中，如果存在则说明有权限元素应该显示，否则没有权限移除对应的元素。
- 以上便是权限自定义指令的整体实现思路，相对来说还是比较简单的，下面我们来看一下具体的代码实现。
权限校验代码实现
<button v-permission="'add'">add</button>
<button v-permission="'del'">del</button>
<button v-permission="'update'">update</button>
<button v-permission="'query'">query</button>
const app = createApp();
app.directive('permission',{
mounted(el,binding){
//从服务获取用户的权限列表，一般获取后存放于vuex中，本案例为了方便演示将直接以字符串的形式展示
//权限之间以分号分隔
//管理员权限："add;del;update;query"
//普通用户权限："add;del;update;query"
let permission = "update;query",//权限字符串
permissionList = [];//权限列表
if(!permission) permission = "";
permissionList = permission.split(";");
//获取需要的权限标识，即元素给指令传进来的参数值
let passText = binding.value,//可以是多个值，中间以分号分隔
passTextArr = [];//将权限解析到数组中
if(!passText) passText = "";
passTextArr = passText.split(';');
//定义一个权限标识变量，用于标识是否有权限
let flag = false;
//循环遍历权限列表，检测用户是否有相应的操作权限
for(let i = 0; i < passTextArr.length; i++){
if(permissionList.includes(passTextArr[i])){
//如果从服务器中获取的权限列表中有组件所需的权限，则将flag置为true,同时跳出循环
flag = true;
break;
}
}
//如果flag为false，也就是没权限则直接将元素移除或者隐藏
if(!flag) el.parentNode && el.parentNode.removeChild(el);
}
})
以上代码运行起来后，我们会发现对应管理员来说，会看到全部按钮，而对于普通用户来说则只能看到update和query按钮。
总结
以上便是关于元素或组件权限校验的自定义指令实现思路分析。最后我们还实现了一个简单的小demo，当然这里也只有一些简单的逻辑分析。在正式开发中还需要根据业务需要去做相应的逻辑开发。
好了本文就介绍到这里，欢迎喜欢的小伙伴点赞留言加关注哦！