按钮级权限是否显示,和权限验证的函数

最新推荐文章于 2023-09-20 15:36:23 发布

勤勤恳恳的锅炉工

最新推荐文章于 2023-09-20 15:36:23 发布

阅读量281

点赞数

本文链接：https://blog.csdn.net/m0_61149511/article/details/127111677

版权

关键词由CSDN通过智能技术生成

很多系统后台都有权限的区分,会详细到每一个按钮上,那用的次数很多,这个时候最简单的就是自定义指定去操作. 或者封装处理函数,当用到的时候调用就行了,来判断有没有权限,

先说封装指令:

思路就是把后台传过来的权限数据放到vuex里然后用指定拿到的数据去判断vuex里面有没有,如果没有权限,就把dom移除了

首先创建permission.js

import store from '../../vuex/store'

function checkPermission(el, binding) {
    const { value } = binding
    const roles = store.state && store.state.userInfo.authorities
    if (value && value instanceof Array) {
        if (value.length > 0) {
            const permissionRoles = value

            const hasPermission = roles.some(role => {
                return permissionRoles.includes(role)
            })

            if (!hasPermission) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        }
    } else {

    }
}

export default {
    inserted(el, binding) {
        checkPermission(el, binding)
    },

}

然后创建authorities.js

import permission from './permission/permission'

const install = function(Vue) {
    Vue.directive('permission', permission)
}

if (window.Vue) {
    window['permission'] = permission
    Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

用的时候就是直接引入

import permission from '@/utils/authorities.js';

v-permission="['personal/staff结单']"

下面是处理函数的方法:

export default function checkPermission(value) {
    if (value && value instanceof Array && value.length > 0) {
        const roles = store.state && store.state.userInfo.authorities
        const permissionRoles = value

        const hasPermission = roles.some(role => {
            return permissionRoles.includes(role)
        })
        return hasPermission
    } else {
        console.error(`need roles! Like v-permission="['admin','editor']"`)
        return false
    }
}

直接引入就行了返回的是布尔值,直接判断是不是有权限,可以做个点击事件,没权限的话做个提示之类的