v-has自定义指令实现按钮权限判断

Posted 2023-04-27

参考技术A

应用场景：管理员配置权限之后、用户登录时、从接口拿到按钮权限列表、然根据后台有哪些数据判断显示哪些按钮

全局自定义 (<a href="https://www.jb51.net/article/209716.htm">自定义指令源码</a>)

局部自定义

一个指令定义对象可以提供如下几个钩子函数（均为可选）

**bind: **只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted: 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）

update: 所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

componentUpdated: 指令所在组件的VNode及其子VNode全部更新后调用。

**unbind: **只调用一次，指令与元素解绑时调用。

登录接口拿到按钮权限列表，存入本地缓存LOGIN_USER_BUTTON_AUTH中

数据格式如下：

自定义v-has指令的配置

在utils文件夹下，新建hasPermission.js文件，在index.js中统一导出

utils文件下的index.js

utils文件夹下的其他js文件也可以统一在index.js里导出

main.js中引入

组件中使用v-has根据按钮权限，判断是否显示该按钮

Vue前端用户权限控制大全

参考技术A 用户权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源

接口权限目前一般采用通用的形式来验证(用户是否登录系统)，没有的话一般返回401，跳转到登录页面重新进行登录 ,
登录成功后拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token

通过自定义指令进行按钮权限的判断

自定义权限指令

在使用的按钮中只需要引用v-has指令

全局路由守卫里做判断
每次路由跳转的时候都要判断权限，这里的判断也很简单，因为菜单的name与路由的name是一一对应的，而后端返回的菜单就已经是经过权限过滤的
如果根据路由name找不到对应的菜单，就表示用户有没权限访问
如果路由很多，可以在应用初始化的时候，只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载
这种方式的缺点：
菜单需要与路由做一一对应，前端添加了新功能，需要通过菜单管理功能添加新的菜单，如果菜单配置的不对会导致应用不能正常使用
全局路由守卫里，每次路由跳转都要做判断