vue---权限指令

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部