vue实现按钮功能级权限控制

1、store下新建一个js，或者直接使用user.js

代码语言：javascript复制

import db from '@/utils/localstorage'

const state = {
    permissions: db.get('PERMISSIONS') || [],
}

const mutations = {
    SET_PERMISSION (state, val) {
        db.save('PERMISSIONS', val)
        state.permissions = val
    },
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

2、合适的位置接口获取权限信息，比如登录接口

代码语言：javascript复制

####这里简化了代码######
function _queryPermissionList(to, next) {
    return new Promise((resolve, reject) => {
        queryPermissionList().then(res => {
            let permissionsList = res.permissionList;
            store.commit("user/SET_PERMISSION", permissionsList ? permissionsList : []);
            resolve()
        }).catch(err => {
            reject(err)
        })
    })
}

3、定义按钮鉴权标签，这里采用插件的形式

代码语言：javascript复制

// 定义一些和权限有关的 Vue指令

// 必须包含列出的所有权限，元素才显示
export const hasPermission = {
    install(Vue) {
        Vue.directive('hasPermission', {
            bind(el, binding, vnode) {
                const permissions = vnode.context.$store.state.user.permissions
                const value = binding.value
                let flag = true
                for (const v of value) {
                    if (!permissions.includes(v)) {
                        flag = false
                    }
                }
                if (!flag) {
                    if (!el.parentNode) {
                        el.style.display = 'none'
                    } else {
                        el.parentNode.removeChild(el)
                    }
                }
            }
        })
    }
}

// 当不包含列出的权限时，渲染该元素
export const hasNoPermission = {
    install(Vue) {
        Vue.directive('hasNoPermission', {
            bind(el, binding, vnode) {
                const permissions = vnode.context.$store.state.user.permissions

                const value = binding.value
                let flag = true
                for (const v of value) {
                    if (permissions.includes(v)) {
                        flag = false
                    }
                }
                if (!flag) {
                    if (!el.parentNode) {
                        el.style.display = 'none'
                    } else {
                        el.parentNode.removeChild(el)
                    }
                }
            }
        })
    }
}

// 只要包含列出的任意一个权限，元素就会显示
export const hasAnyPermission = {
    install(Vue) {
        Vue.directive('hasAnyPermission', {
            bind(el, binding, vnode) {
                const permissions = vnode.context.$store.state.user.permissions
                const value = binding.value
                let flag = false
                for (const v of value) {
                    if (permissions.includes(v)) {
                        flag = true
                    }
                }
                if (!flag) {
                    if (!el.parentNode) {
                        el.style.display = 'none'
                    } else {
                        el.parentNode.removeChild(el)
                    }
                }
            }
        })
    }
}

4、安装插件，在main.js中

代码语言：javascript复制

import { hasPermission, hasNoPermission, hasAnyPermission } from '@/utils/permissionDirect'

const Plugins = [
    hasPermission,
    hasNoPermission,
    hasAnyPermission
]

Plugins.map((plugin) => {
    Vue.use(plugin)
})

5、使用，如List.vue中

代码语言：javascript复制

<el-button icon="el-icon-edit-outline" v-has-permission="['sys/user:edit']" title="编辑" size="mini" type="primary" plain @click="editItem(row)"/>

v-has-permission：是否含该权限 v-has-no-permission：是否不含该权限 v-has-any-permission：是否含该列出权限的任意一个

el 插件 接口 权限 权限控制

0 人点赞