当前位置: 首页 > news >正文

【vue】vue中按钮权限控制:

文章目录

        • 一、获取权限码
        • 二、三种按钮级别的权限控制方式
            • 【1】函数方式
            • 【2】组件方式
            • 【3】指令方式


一、获取权限码

要做权限控制,肯定需要一个code,无论是权限码还是角色码都可以,一般后端会一次性返回,然后全局存储起来就可以了,在登录成功以后获取并保存到全局的store中:

import { defineStore } from 'pinia';
export const usePermissionStore = defineStore({state: () => ({// 权限代码列表permCodeList: [],}),getters: {// 获取getPermCodeList(){return this.permCodeList;}, },actions: {// 存储setPermCodeList(codeList) {this.permCodeList = codeList;},// 请求权限码async changePermissionCode() {const codeList = await getPermCode();this.setPermCodeList(codeList);}}
})

二、三种按钮级别的权限控制方式

【1】函数方式

使用示例如下:

<template><a-button v-if="hasPermission(['20000', '2000010'])" color="error" class="mx-4">拥有[20000,2000010]code可见</a-button>
</template><script lang="ts">import { usePermission } from '/@/hooks/web/usePermission';export default defineComponent({setup() {const { hasPermission } = usePermission();return { hasPermission };},});
</script>

本质上就是通过v-if,只不过是通过一个统一的权限判断方法hasPermission:

export function usePermission() {function hasPermission(value, def = true) {// 默认视为有权限if (!value) {return def;}const allCodeList = permissionStore.getPermCodeList;if (!isArray(value)) {return allCodeList.includes(value);}// intersection是lodash提供的一个方法,用于返回一个所有给定数组都存在的元素组成的数组return (intersection(value, allCodeList)).length > 0;return true;}
}

很简单,从全局store中获取当前用户的权限码列表,然后判断其中是否存在当前按钮需要的权限码,如果有多个权限码,只要满足其中一个就可以。

【2】组件方式

除了通过函数方式使用,也可以使用组件方式,Vue vben admin提供了一个Authority组件,使用示例如下:

<template><div><Authority :value="RoleEnum.ADMIN"><a-button type="primary" block> 只有admin角色可见 </a-button></Authority></div>
</template>
<script>import { Authority } from '/@/components/Authority';import { defineComponent } from 'vue';export default defineComponent({components: { Authority },});
</script>

使用Authority包裹需要权限控制的按钮即可,该按钮需要的权限码通过value属性传入,接下来看看Authority组件的实现。

<script lang="ts">import { defineComponent } from 'vue';import { usePermission } from '/@/hooks/web/usePermission';import { getSlot } from '/@/utils/helper/tsxHelper';export default defineComponent({name: 'Authority',props: {value: {type: [Number, Array, String],default: '',},},setup(props, { slots }) {const { hasPermission } = usePermission();function renderAuth() {const { value } = props;if (!value) {return getSlot(slots);}return hasPermission(value) ? getSlot(slots) : null;}return () => {return renderAuth();};},});
</script>

同样还是使用hasPermission方法,如果当前用户存在按钮需要的权限码时就原封不动渲染Authority包裹的内容,否则就啥也不渲染。

【3】指令方式

使用示例如下:

<a-button v-auth="'1000'" type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>

实现如下:

import { usePermission } from '/@/hooks/web/usePermission';function isAuth(el, binding) {const { hasPermission } = usePermission();const value = binding.value;if (!value) return;if (!hasPermission(value)) {el.parentNode?.removeChild(el);}
}const mounted = (el, binding) => {isAuth(el, binding);
};const authDirective = {// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted,
};

// 注册全局指令

export function setupPermissionDirective(app) {app.directive('auth', authDirective);
}

只定义了一个mounted钩子,也就是在绑定元素挂载后调用,依旧是使用hasPermission方法,判断当前用户是否存在通过指令插入的按钮需要的权限码,如果不存在,直接移除绑定的元素。

很明显,权限控制的实现有两个问题,一是不能动态更改按钮的权限,二是动态更改当前用户的权限也不会生效。
【1】解决第一个问题很简单,因为上述只有删除元素的逻辑,没有加回来的逻辑,那么增加一个updated钩子:

app.directive("auth", {mounted: (el, binding) => {const value = binding.valueif (!value) returnif (!hasPermission(value)) {// 挂载的时候没有权限把元素删除removeEl(el)}},updated(el, binding) {// 按钮权限码没有变化,不做处理if (binding.value === binding.oldValue) return// 判断用户本次和上次权限状态是否一样,一样也不用做处理let oldHasPermission = hasPermission(binding.oldValue)let newHasPermission = hasPermission(binding.value)if (oldHasPermission === newHasPermission) return// 如果变成有权限,那么把元素添加回来if (newHasPermission) {addEl(el)} else {// 如果变成没有权限,则把元素删除removeEl(el)}},
})const hasPermission = (value) => {return [1, 2, 3].includes(value)
}const removeEl = (el) => {// 在绑定元素上存储父级元素el._parentNode = el.parentNode// 在绑定元素上存储一个注释节点el._placeholderNode = document.createComment("auth")// 使用注释节点来占位el.parentNode?.replaceChild(el._placeholderNode, el)
}const addEl = (el) => {// 替换掉给自己占位的注释节点el._parentNode?.replaceChild(el, el._placeholderNode)
}

主要就是要把父节点保存起来,不然想再添加回去的时候获取不到原来的父节点,另外删除的时候创建一个注释节点给自己占位,这样下次想要回去能知道自己原来在哪。

【2】第二个问题的原因是修改了用户权限数据,但是不会触发按钮的重新渲染,那么我们就需要想办法能让它触发,这个可以使用watchEffect方法,我们可以在updated钩子里通过这个方法将用户权限数据和按钮的更新方法关联起来,这样当用户权限数据改变了,可以自动触发按钮的重新渲染:

import { createApp, reactive, watchEffect } from "vue"
const codeList = reactive([1, 2, 3])const hasPermission = (value) => {return codeList.includes(value)
}app.directive("auth", {updated(el, binding) {let update = () => {let valueNotChange = binding.value === binding.oldValuelet oldHasPermission = hasPermission(binding.oldValue)let newHasPermission = hasPermission(binding.value)let permissionNotChange = oldHasPermission === newHasPermissionif (valueNotChange && permissionNotChange) returnif (newHasPermission) {addEl(el)} else {removeEl(el)}};if (el._watchEffect) {update()} else {el._watchEffect = watchEffect(() => {update()})}},
})

将updated钩子里更新的逻辑提取成一个update方法,然后第一次更新在watchEffect中执行,这样用户权限的响应式数据就可以和update方法关联起来,后续用户权限数据改变了,可以自动触发update方法的重新运行。

http://www.lryc.cn/news/121060.html

相关文章:

  • 【博客695】k8s subPathExpr作用
  • 微信小程序中键盘弹起输入框自动跳到键盘上方处理
  • excel将主信息和明细信息整理为多对多(每隔几行空白如何填充)
  • 卷积神经网络实现彩色图像分类 - P2
  • 【博客694】k8s kubelet 状态更新机制
  • 【博客692】grafana如何解决step动态变化时可能出现range duration小于step
  • eNSP:ibgp的破水平切割练习
  • maven是什么?安装+配置
  • 基于长短期神经网络LSTM的多分类代码
  • 利用爬虫爬取图片并保存
  • 设计模式之Bridge模式的C++实现
  • springboot异步任务
  • Flutter父宽度自适应子控件的宽度
  • 什么是 API 安全?学习如何防止攻击和保护数据
  • 简述 TCP 和 UDP 的区别以及优缺点和使用场景?
  • react进阶
  • 使用windows搭建WebDAV服务,并内网穿透公网访问【无公网IP】
  • 科技感响应式管理系统后台登录页ui设计html模板
  • Lombok的使用及注解含义
  • 实时通信应用的开发:Vue.js、Spring Boot 和 WebSocket 整合实践
  • 【C++】C++异常
  • 学生成绩管理系统V2.0
  • 【C++】开源:tinyxml2解析库配置使用
  • 如何使用webpack打包一个库library,使用webpack打包sdk.
  • 项目一:基于stm32的阿里云智慧消防监控系统
  • 【果树农药喷洒机器人】Part6:基于深度相机与分割掩膜的果树冠层体积探测方法
  • 打印1到最大的n位数
  • 设计模式行为型——状态模式
  • ElastAlert通过飞书机器人发送报警通知
  • 恒温碗语音芯片,具备数码管驱动与温度传感算法,WT2003H-B012