vue|vue 管理页面按钮权限

场景 在beforeRouteEnter中获取权限,并使用自定义指令设置权限
示例代码

// 获取权限 beforeRouteEnter (to, from, next) { // 获取当前用户 let sysUserId = getSession(USER_ID) if (sysUserId) { // 获取按钮权限并设置 let {data} = await user.getAllButtons(sysUserId, to.meta.id) next(vm => { vm.$permittedButtons = data.map(x => x.widgetId.split('-')[1]) }) } else { next(vm => { vm.$permittedButtons = [] }) } }// 自定义指令进行页面按钮权限控制 Vue.directive('pms', function (el, binding, vnode) { // 处理beforeRouteEnter中设置的权限($permittedButtons)在首次渲染中获取不到的情况 setTimeout(() => { let {value: btnKey} = binding let {componentInstance, context} = vnode let btnPermissions = context.$permittedButtons let instance = context while (instance && btnPermissions == null) { instance = instance.$parent if (instance) btnPermissions = instance.$permittedButtons } if (btnPermissions == null || !btnPermissions.includes(btnKey)) { Vue.config.silent = true componentInstance.disabled = true Vue.config.silent = false } }) })

注意事项 beforeRouteEnter中设置的权限数据是在 自定义指令生效之后,所以需要用setTimeout延迟获取权限数据
【vue|vue 管理页面按钮权限】vue|vue 管理页面按钮权限
文章图片
vue|vue 管理页面按钮权限
文章图片

    推荐阅读