hasPermission(value)) { // 挂载的时候没有权限把元素删除 removeEl(el) } }, updated(el, binding) { // 按钮权限码没有变化，不做处理 if (binding.value === binding.oldValue) return // 判断用户本次和上次权限状态是否一样，一样也不用做处理 let oldHasPermission = ...
第二个问题的原因是修改了用户权限数据,但是不会触发按钮的重新渲染,那么我们就需要想办法能让它触发,这个可以使用watchEffect方法,我们可以在updated钩子里通过这个方法将用户权限数据和按钮的更新方法关联起来,这样当用户权限数据改变了,可以自动触发按钮的重新渲染: import { createApp, reactive, watchEffect } from "...
js复制代码app.directive("auth", { mounted: (el, binding) => { const value = binding.value if (!value) return if (!hasPermission(value)) { // 挂载的时候没有权限把元素删除removeEl(el) } },updated(el, binding) { // 按钮权限码没有变化,不做处理 if (binding.value === binding.oldVa...
只定义了一个mounted钩子,也就是在绑定元素挂载后调用,依旧是使用hasPermission方法,判断当前用户是否存在通过指令插入的按钮需要的权限码,如果不存在,直接移除绑定的元素。 很明显,Vue vben admin的实现有两个问题,一是不能动态更改按钮的权限,二是动态更改当前用户的权限也不会生效。 解决第一个问题很简单,因为上述...
最近的面试中有一个面试官问我按钮级别的权限怎么控制,我说直接v-if啊,他说不够好,我说我们项目中按钮级别的权限控制情况不多,所以v-if就够了,他说不够通用,最后他对我的评价是做过很多东西,但是都不够深入,好吧,那今天我们就来深入深入。 因为我自己没有相关实践,所以接下来就从这个有16.2k星星的后台管理...
在面试中，面对按钮级别的权限控制问题，使用v-if的直接方法似乎显得不够全面。面试官指出，这不足以应对复杂和通用的需求。实际应用中，针对权限控制，需要更深入和灵活的策略。以 Vue vben admin 项目为例，深入探讨权限控制的三种方法：函数方式、组件方式与指令方式。函数方式 通过一个统一的权限判断...
在进行直接查询时无异常,没有显示功能按钮;但在查询状态 status == 0 为真后,再次查询status==1 则进行报错,并且在没有权限的情况下,显示功能按钮。 这里作出猜想,因为在v-if判断status==0 的时候,进行了 是否status==1 等于1的判断;而再次查询后,status的值刷新为1时,在v-if判断是否 status==0 后,则...
最近的面试中有一个面试官问我按钮级别的权限怎么控制,我说直接v-if啊,他说不够好,我说我们项目中按钮级别的权限控制情况不多,所以v-if就够了,他说不够...
这里利用 vue 的自定义指令功能,实现一个按钮级别的权限控制指令 💡 基础版本的权限控制 假设我们开发一个掘金,里面有文章编辑、发布、删除等功能,但不是每一个用户都可以有删除权限,除了用v-if/v-show外,可以用一个简单的权限控制指令实现 // permission.js ...
五、V-IF的常见使用场景 权限控制:在基于用户权限的应用中,可以使用v-if来控制不同用户看到的内容。例如,只有管理员可以看到某些操作按钮。 动态组件:在需要根据不同条件动态加载不同组件时,可以使用v-if来实现。例如,在一个多步骤表单中,根据当前步骤显示相应的表单内容。