这是一个很常见的功能,基本在项目搭建之初,就会考虑这个问题,动态路由菜单和按钮加权限的问题。
网上的相关博客也很多,感觉不太适应自己的需求,今天这篇文章只介绍动态按钮权限,如果有需要的小伙伴就跟着我一起来看看吧 ~ ~ ~
1.第一步要在vuex存储一个按钮数组 AuthButtons
,具体步骤为:
在store/index.js 里:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
let store = new Vuex.Store({
// 1. state
state:{
authButtons:localStorage.getItem('AuthButtons')||[],//按钮权限数组
},
// 2. mutations
mutations:{
// state指的是state的数据
// payload传递过来的数据
//按钮权限数组
setAuthButtons(state, payload) {
localStorage.setItem('AuthButtons',JSON.stringify(payload))
state.authButtons = payload
}
}
});
export default store;
2.在页面上使用,先赋值
<script>
const { mapGetters, mapMutations, mapActions } = createNamespacedHelpers('app')
methods: {
...mapMutations([
'setAuthButtons'
]),
getUserMenu2() {
this.buttonsList = [] //按钮数组
getUserNav(1).then(res => {
if (!res) return false
this.filterList(res)//调用递归
res.forEach(item => {
item.checked = item.url === '/doorCenter'
// 按钮权限数组获取数据
// 存储按钮权限数组
this.setAuthButtons(this.buttonsList)
})
//菜单数组
localStorage.setItem('userMenu2', JSON.stringify(res))
})
},
// 递归方法
filterList(inputList) {
inputList.forEach(item => {
if(item.opts&&item.opts.length>0){
item.opts.forEach(arr=>{
this.$set(arr,'weburl',item.url)
})
this.buttonsList.push(...item.opts)
}
if(item.subNodes&&item.subNodes.length>0){
this.filterList(item.subNodes)
}
})
},
}
</script>
3.在全局写自定义指令方法:
在src 文件夹里新建 directives 文件夹,里面见一个入口文件index.js :
// 自定义指令
import store from '@/store'
export default {
// 是否有按钮权限判定
btnHas: {
inserted(el, binding) {
let arr = JSON.parse(localStorage.getItem("AuthButtons"))
let num = 0
try {
arr.forEach(ele => {
if (window.location.hash.includes(ele.weburl) && ele.url == binding.value) {
console.log(binding,'binding')
num++
}
});
if (num == 0) {
throw new Error('ending')
}
} catch (err) {
el.remove()
return false
}
}
}
}
4.在main.js 文件里,全局引用:
// 按钮权限部分
// 全局directive指令
import directives from './directives'
// 注册本页全局指令方法
Object.keys(directives).forEach(key => {
Vue.directive(key, directives[key])
})
整个完整的步骤就在这里了,可以直接拿去用