vue权限指令从陪伴到放弃

开始接触权限指令

刚开始学vue的时候,从网上克隆了那个star最多的后台管理系统(目前好像还是)。

看到用权限指令控制按钮可见与否的时候,觉得很神奇,很方便。

后来工作中也一直这么用着,新项目或接手的项目。

慢慢发现问题!!!

  • 有些组件用了报错
    如用在el-tooltip(element-plus)上时就会报错

Runtime directive used on component with non-element root node.

官网的解释是

  • 只能控制显示不显示
    如把不开权限的按钮变成disabled、或一个特别的样式。(好像样式上,也还可以做。。)
    如根据权限不同,布局的微调
  • 只能控制UI,无法响应逻辑变化
    如根据不同的权限,点击按钮后有不同的操作逻辑
  • TS类型提示不精确
    • 空着不填也不报错
    • 带修饰符的指令难以定义类型
      (这个只能定义另外的指令来实现,如本来修饰符用法auth.any,要定义一个新指令auth-any来使用。)

那么该怎么做?

让我们把指令抛掉,想想在react框架中是怎么做的?

对的,函数。

组件都可以是函数,权限判断当然用函数

不仅可以在template中,也可以在script中,统一就这一个。

  • 定义一个auth函数
  • 使用

完整使用示例

soon-admin-vue3
github.com/leafio/soon...
vue3 ts tailwind-css i18n国际化 多标签 可视化mock 移动端适配

支持一下

热情地欢迎各位兄弟姐妹的大力支持!

github: github.com/leafio?tab=...

期待至少一个项目能达成1000个star

期待至少一个npm能达成每周1000次下载

相关推荐
视频砖家31 分钟前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689971 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机5 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人5 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密