vue使用自定义指令来控制页面按钮组的权限思想
目录
- 自定义指令来控制页面按钮组的权限思想
- vue添加按钮权限~通过自定义指令
- 1、需求
- 2、思路
- 3、代码实现
自定义指令来控制页面按钮组的权限思想
在vuejs中, 我们可以自定义一些指令,来控制一些按钮加载之前的动作, 比如现有的 v-if 或者 v-show
这些功能是我们可以手写的, 现在们来做一个初级的页面级的权限控制的例子
<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"/>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)