vue---权限指令

vue

使用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指令验证权限结束。

以上是 vue---权限指令 的全部内容, 来源链接: utcz.com/z/379924.html

回到顶部