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
    }

    // 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')
    })