vue使用自定义指令来控制页面按钮组的权限思想

 更新时间:2022年08月15日 10:34:21   作者:A黄俊辉A  
这篇文章主要介绍了vue使用自定义指令来控制页面按钮组的权限思想,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

自定义指令来控制页面按钮组的权限思想

在vuejs中, 我们可以自定义一些指令,来控制一些按钮加载之前的动作, 比如现有的 v-if 或者 v-show

这些功能是我们可以手写的, 现在们来做一个初级的页面级的权限控制的例子

vue自定义指令

<template>
  <div class="table-wrapper">
    <div class="action-bar">
        //v-hasProm  指令是说 如果指令中value 包含在 data.promission 数组中, 就把这个按钮显示出来 
      <el-button v-has-prom="'admin.goods.edit'" type="success" icon="el-icon-plus" @click.native = "$router.push('/makeform/create')">新建</el-button>
  </div>
</template>
<script>
export default {
  name: "FromList",
  //这里添加了一个局部指令 (只作用于本面页)
  directives:{
    hasProm:{
      inserted(el,binding,vnode){
        console.log(el,binding,vnode);
        //这里要说一下 这三个参数
        // el就是 指令所在的 元素(element)   我们可以使用  el.style.dispaly='none' 来对el 的css进行设置
        //binding 是指的binding 的信息, 其中可以得到我们 v-hasProm = value 中的  value值
        //vnode 就是指的虚拟节点, 我们可以通过它, 得到当前页面中的  component.data 中的数据 也就是promission 数组长  页面的 this 在指令中是得不到了, 我们能过  vnode.context得到的就是 this
        //看一下代码
        let bindvalue = binding.value;    //bindvalue 的值是'admin.goods.edit'
        let promissionArr = vnode.context.promission;
        let p = promissionArr.find((item)=>{
            return item == bindvalue;
        })
        if(p == undefined){
            //说明在数组中没有这个权限, 把这个元素给隐藏
            el.style.display="none"
        }
        
      }
    }
  },
  data(){
    return {
        promission:["admin.goods.add","admin.goods.edit","admin.goods.delete"]
        //上面的权限更表 以字符串开式, 这个其实可以从后端获取得到, 然后放在store中, 全局可使用, 这里就写在data中算了
    }
  },
  created() {
  },
  methods:{
  }
}
</script>
<style scoped>
</style>

上面的代码, 主要要注意 自定义指令的参数, 都可以获得什么有用的数据。

vue添加按钮权限~通过自定义指令

1、需求

客户:需要把导入、删除权限化;指定人员有权限;

2、思路

后台有一个接口,是可以查询到当前登录人的权限;

前端方案:

1.每到一个页面就请求一次接口是否有权限;(太麻烦了)

2.自定义指令 · Vue.directive;(一次请求,一直用)

3、代码实现

1.自定义指令

创建 /directive/permission/hasPermi 文件

//用来获取权限数据
import store from '@/store'
 
export default {
 
  inserted(el, binding, vnode) {
    //获取绑定值
    const { value } = binding
    // TODO 匹配规则,在页面写的要对应这个匹配规则
    const all_permission = "*:*:*";
    //获取用户权限数据
    const permissions = store.getters && store.getters.permissions 
if (value && value instanceof Array && value.length > 0) { 
      //权限标志
      const permissionFlag = value
      //判断用户是否有此权限
      const hasPermissions = permissions.some(permission => {
        console.log('permission', permission);
  return all_permission === permission || permissionFlag.includes(permission)
      })
      
      //没有权限-移除页面上的控件
      if (!hasPermissions) {{
        console.log('没有权限-移除');
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else { 
      el.parentNode && el.parentNode.removeChild(el)
      throw new Error(`请设置数组操作权限`)
    }
  }
}

2.注册指令

创建 /directive/permission/index文件

import hasPermi from './hasPermi'
import Vue from "vue"
 
 
const install = function (Vue) {
  Vue.directive('hasPermi', hasPermi)
}
 
 
if (window.Vue) {
  window['hasPermi'] = hasPermi
  Vue.use(install);
}
 
export default install

3.在main.js里面进行全局注册 

import permission from './directive/permission'
 
 
Vue.use(permission)

vue官网对指令的解释

https://cn.vuejs.org/v2/guide/custom-directive.html

4.使用方法

      <button
           v-has-permi="['btn:pre:del']"
           style="margin-top: 4px"/>
 
 
   <button
           v-has-permi="['btn:pre:export']"
           style="margin-top: 4px"/>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • Vue使用driver.js做引导页

    Vue使用driver.js做引导页

    Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库,本文主要介绍了Vue使用driver.js做引导页,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • vue - vue.config.js中devServer配置方式

    vue - vue.config.js中devServer配置方式

    今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue移动端实现左滑编辑与删除的全过程

    vue移动端实现左滑编辑与删除的全过程

    vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架,这篇文章主要给大家介绍了关于vue移动端实现左滑编辑与删除的相关资料,需要的朋友可以参考下
    2021-05-05
  • 通过原生vue添加滚动加载更多功能

    通过原生vue添加滚动加载更多功能

    这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • vue中for循环作用域问题处理方式

    vue中for循环作用域问题处理方式

    这篇文章主要介绍了vue中for循环作用域问题处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 浅谈vue3中ref、toRef、toRefs 和 reactive的区别

    浅谈vue3中ref、toRef、toRefs 和 reactive的区别

    本文主要介绍了浅谈vue3中ref、toRef、toRefs 和 reactive的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue中$nextTick实现源码解析

    Vue中$nextTick实现源码解析

    这篇文章主要为大家介绍了Vue中$nextTick实现源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 基于vue3实现一个简单的输入框效果

    基于vue3实现一个简单的输入框效果

    这篇文章主要为大家详细介绍了如何使用Vue3实现一个简单的输入框,可以实现输入文字,添加表情等功能,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vue组件传值的实现方式小结【三种方式】

    vue组件传值的实现方式小结【三种方式】

    这篇文章主要介绍了vue组件传值的实现方式,结合实例形式总结分析了vue.js组建传值的三种实现方式,包括父传子、子传父及非父子传值,需要的朋友可以参考下
    2020-02-02
  • Vue项目如何改变屏幕尺寸重新刷新页面-计算页面尺寸

    Vue项目如何改变屏幕尺寸重新刷新页面-计算页面尺寸

    这篇文章主要介绍了Vue项目如何改变屏幕尺寸重新刷新页面-计算页面尺寸,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论