vue按鈕權限控制

1. 首先創建src/directives/permission.js####

a.  在vue全局掛載方法$_has,主要實現思路是將頁面的按鈕英文名傳入，用以對比目前是否在權限數組里面
b.  方法定義好以后在main.js里面引入

2. 第二步,在store/user.js####

    a. state: {btnPermission: []}
    b. mutaitions: {
        定義好請求的方法,這里將把后台返回的按鈕權限數組儲存在state里面，或者本地緩存里面
    }
    c. actions: {
        觸發mutaitions里面定義好的方法
    }

3. 第三步,在routerConfig.js（路由攔截器里面）####

    a. 在判斷完用戶權限，以及是否為白名單以后的最后跳轉步驟觸發store里面actions里面的方法

4. 觸發步驟####

    每次路由切換時會去routerConfig.js里面觸發store.js里面定義好的方法，
    拿到按鈕權限數組，頁面加載時，會主動觸發頁面綁定了$_has的方法，把當前的按鈕英文名傳遞給方法，
    方法判斷以后返回一個布爾類型，供頁面渲染，從而實現權限控制！

5. 實現代碼；####

    //permission.js
    import Vue from 'vue';

    const hasPermission = userPermission => {
        // 當前按鈕列表，我是用本地緩存存儲
        let btnPermissionList = JSON.parse(sessionStorage.getItem('btnPermission'))
        // 因為后台返回的不是以按鈕名的數組，所以需要過濾
        let eglishPermission = btnPermissionList.map((v, i) => {
            return v.permission
        })
        // 是否在權限數組里面
        let status = eglishPermission.includes(userPermission)
        return status
    }

    //全局方法掛載
    Vue.prototype.$_has = hasPermission

    // main.js引入permission.js
    import './directives/permission'

    // .vue 頁面使用
    <template>
        <div>
            <button v-if="$_has('add')">增加</button>
            <button v-if="$_has('edit')">編輯</button>
            <button v-if="$_has('delet')">刪除</button>
        </div>
    </template>

    // store/user.js
    export const user = {
        state: {
            btnPermission: []
        },
        mutaitions: {
            //獲得按鈕權限數組
            getUserPermission(state){
                // 拼接一些后端請求的參數，將封裝好的方法引入，這里進行請求后進行存儲數據到本地緩存
            }
        },
        actions:{
            // 觸發mutaitions里面的方法
            GET_USER_PERMISSION({commit}, payload) {
                commit('getUserPermission')
            }
        }
    }

    // router/routerConfig.js
    import store from '@/store'
    router.beforeEach((to, from, next) => {
        // ...在所有判斷進行完，准備放行的時候觸發actions方法
        store.dispatch('GET_USER_PERMISSION')
    })