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

目录 自定义指令来控制页面按钮组的权限思想 vue添加按钮权限~通过自定义指令 1、需求 2、思路 3、代码实现

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

在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使用自定义指令来控制页面按钮组的权限思想的详细内容...