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次下载

• Soon-Admin TS全栈后台管理系统
  • 前端vue3版：soon-admin-vue3
  • 前端react版：soon-admin-react-nextjs
  • 后端express：soon-admin-express
• soon-mock 一键生成增删查改，有ui的json-server，可js自定义逻辑
• soon-tools 分层级JSON转TS类型，有网页版、npm、exe三种方式使用
• soon-i18n 类型安全的函数式i18n库，支持vue3、react、solid、svelte
• soon-storage 对于localStorage的类型安全封装
• soon-fetch 不到3K的组合式请求库
• react-vmodel 多层级objcet双向绑定，像vue一样简单