zoukankan      html  css  js  c++  java
  • 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指令验证权限结束。

  • 相关阅读:
    linux磁盘管理
    yarn一直在跑一个用户为dr.who的application
    HBASE强制删除表
    Centos安装git2.2.1
    MySQL类型float double decimal的区别
    PHP的extension_dir设置问题
    opencart安装和使用PHPMailer
    在路上
    修改win10中linux子系统的root密码
    关于js for循环click事件
  • 原文地址:https://www.cnblogs.com/e0yu/p/15058941.html
Copyright © 2011-2022 走看看