开始接触权限指令
刚开始学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...
vue3tstailwind-cssi18n国际化多标签可视化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一样简单