我正在参加「掘金·启航计划」。
1、 场景
根据不同权限的用户角色，在前端页面显示对应需要显示的按钮。
2、 思路
权限基本都是由后端返回，那么最简单的就是后端返回的角色权限中也包含按钮权限相关数据；
拿到按钮权限数据后，可以根据页面路由去进行匹配，从而控制按钮显示与否。
这里控制显示与否的方法，可以使用vue的 自定义指令 方法。
3、 实现
- 获取按钮权限
根据项目实际情况，在登录后获取到按钮权限，存储下来。
（可参考）
页面显示是需要根据路由来的，所有按钮权限数据就对应着路由defaultPath 和权限btnPole。
- 获取当前页面路由（路由守卫）
在router下的index.js文件，通过路由守卫把路由存起来。
- 写自定义指令方法
新建一个js文件，写出好自定义指令的方法。
- 全局挂载自定义指令
在main.js文件中挂载。
导入写好的自定义指令方法；
挂载。
- 页面使用自定义指令
直接使用在mian.js中定义的指定字段btn；
在vue文件中用 v-btn 。
4、 局部自义定指令写法
1、在使用 <script setup 的时候，局部自定义指令可以直接以v开头的驼峰式命名;
在使用<script setup>中，任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令，然后在模板中使用。
2、普通情况下，则自定义指令需要在directives选项中注册。
5、 最后
希望能给到需要的人一点点思路和帮助，加油！
