使用VUE开发项目,在进行权限验证的时候,例如在对某个按钮进行权限验证,验证其显示还是隐藏。解决方法有两种:
第一种:在页面中进行权限验证,使用 v-if 来判断按钮的显示和隐藏。
缺点:
1、具体的验证需要在写在页面上,导致每一个视图页面都需要写,对于后期维护相对比较困难。
2、如果使用 v-if 进行权限验证。在页面中的按钮显示可能存在多个 v-if 进行判断,同时也不利于维护。
第二种:封装公共的权限验证方法来进行验证。
缺点:虽然封装公共权限验证方法,能够更好的维护权限验证规则,但是仍然需要在每个页面进行引入,判断,对于按钮可能也会存在多个 v-if 进行显示和隐藏。
第三种:封装权限指令
优点:能够做到统一验证,而且全局注册指令,可以全局使用指令,相对比较灵活和易于维护。
代码示例:
新建:directive.js
/** * directive * 指令 */ import Vue from 'vue'; Vue.directive('permissions',{ inserted: function(el,bind,vnode){ // 自定义指定中无法使用this获取VUE实例 // vnode绑定在实例上下文 // 所以可以用vnode.context可以解决这个问题 let rule = vnode.context.$store.state.user.permissions; let permissions = rule ? rule.split(',') : []; let state = false; for(let i in permissions){ if(bind.value == permissions[i]){ state = true; break; } } !state ? el.remove() : ''; } });
在main.js中引入
import '@/utils/directive' // directive
在页面中使用:
<el-button v-permissions="'config.add'">新增</el-button>
到此,VUE指令验证权限结束。