vue权限指令从陪伴到放弃

leafnote
2,265 阅读2分钟

开始接触权限指令

刚开始学vue的时候，从网上克隆了那个star最多的后台管理系统（目前好像还是）。
看到用权限指令控制按钮可见与否的时候，觉得很神奇，很方便。
后来工作中也一直这么用着，新项目或接手的项目。

image.png

慢慢发现问题！！！

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

Runtime directive used on component with non-element root node.
官网的解释是 image.png

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

那么该怎么做？

让我们把指令抛掉，想想在react框架中是怎么做的？
对的，函数。
组件都可以是函数，权限判断当然用函数。

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

  • 定义一个auth函数
    image.png
  • 使用
    image.png

完整使用示例

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

支持一下

本人正在找工作，如在长三角有合适岗位，请联系我

热情地欢迎各位兄弟姐妹的大力支持！
github: github.com/leafio?tab=…
期待至少一个项目能达成1000个star
期待至少一个npm能达成每周1000次下载

avatar
文章
阅读
粉丝