1. 首先创建src/directives/permission.jsa. 在vue全局挂载方法$_has,主要实现思路是将页面的按钮英文名传入,用以对比目前是否在权限数组里面b. 方法定义好以后在main.js里面引入
  2. 第二步,在store/user.jsa. 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')
    })
02-11 19:12