Vue前端按钮组件权限管理如何实现针对长尾词的精准控制？

本文共计1175个文字，预计阅读时间需要5分钟。

目录+案例1：数组+自定义指令+关于路由权限+案例2：二进制+表达式权限：权限判断+判断和使用+小结+案例1：数组+自定义指令+把权限放到数组中，通过Vue的自定义指令来判断是否拥有该权限

目录

• 方案1：数组+自定义指令
• 关于路由权限
• 方案2： 二进制
• 表达权限：
• 权限判断
• 判断和使用
• 小结

方案1：数组+自定义指令

把权限放到数组中，通过vue的自定义指令来判断是否拥有该权限，有则显示，反之则不显示

我们可以把这个按钮需要的权限放到组件上

<el-button v-hasPermi="['home:advertising:update']" >新建</el-button>

自定义指令：

逻辑就是我们在登陆后会获取该用户的权限，并存储到localStorage中，当一个按钮展示时会判断localStorage存储的权限列表中是否存在该按钮所需的权限。