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

转载于:https://www.cnblogs.com/yzyh/p/11550416.html