上篇是Vue菜单权限的控制,这篇讲一下按钮权限的控制,主要运用了directive自定义指令来实现
最终实现如下这样的效果:
实现代码如下:
1、修改store/modules/permission.js ,获取菜单时并获取按钮列表,并缓存到store
const actions = {
generateRoutes({commit}) {
return new Promise(resolve => {
getUserMenu().then(response => {
let asyncBtns = []
let btnArr = response.data.object.btnList
generaBtn(asyncBtns, btnArr)
console.log(asyncRoutes)
commit('SET_BTNROLES', asyncBtns)
resolve(asyncRoutes)
})
})
}
}
2、在store/getters.js,声明可引用的按钮别名
3、 在directive新建btnPermission/index.js,自定义按钮权限指令
import store from '@/store'
export default {
btnHas: {
inserted(el, binding) {
if(!store.getters.btnRoles.includes(binding.value)){
if(!!window.ActiveXObject || 'ActiveXObject' in window){
el.parentNode.removeChild(el);
}else{
el.remove();
}
}
}
}
}
4、在需要控制按钮权限的页面引用指令,如:
<el-button v-btnHas="'taskInboundSearch'" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
<el-button v-btnHas="'taskInboundRest'" class="filter-item" type="primary" icon="el-icon-refresh" @click="restFrom">重置</el-button>
注意指令里面的按钮名称应该和后台返回的按钮数组对应,否则是不显示的
-_-如果有其他更好的方式,欢迎下方留言-_-