vue 项目设置全局按钮菜单权限

这是一个很常见的功能，基本在项目搭建之初，就会考虑这个问题，动态路由菜单和按钮加权限的问题。
网上的相关博客也很多，感觉不太适应自己的需求,今天这篇文章只介绍动态按钮权限，如果有需要的小伙伴就跟着我一起来看看吧 ~ ~ ~

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])
})

整个完整的步骤就在这里了，可以直接拿去用