Vue后台的角色权限控制 — 指令控制权限

后台管理系统会根据角色权限不同显示不同的模块信息

• 角色的权限数据由后端返回，以下是我的角色权限数据

"ruleNames": [
     "createRule,POST",
     "updateRule,POST",
     "deleteRule,POST",
     "getRuleList,GET",
     "updateRuleStatus,POST",
     "createRole,POST",
     "updateRole,POST",
     "deleteRole,POST",
     "getRoleList,GET",
     "updateRoleStatus,POST",
     "getGoodsList,GET"
 ]

• 通过自定义指令控制是否有权限显示某模块

  • 文件： /src/directive/permission.js

// 我把角色权限的数据放在了 store.getters.ruleNames 里
import store from "../store"

function hasPermission(value, el = false) {
    if (!Array.isArray(value)) {
        throw new Error(`需要配置权限，例如 v-permission="['getStatistics1,GET']"`)
    }

    const hasAuth = value.some(v => store.getters.ruleNames.includes(v))
    if (el && !hasAuth) {
        el.parentNode && el.parentNode.removeChild(el)
    }
    return hasAuth
}

export default {
    // 用app.use导入，可以被当成定义在一个install的函数下调用，函数的参数就是app
    install(app) {
        // 指令权限控制
        app.directive('permission', {
            mounted(el, binding) {
                hasPermission(binding.value, el)
            }
        })
    }
}

• 文件: main.js

// 指令权限控制
import permission from './directive/permission.js'
app.use(permission)

• 用法

<div v-permission="['getStatistics3,GET']"></div>

如果ruleNames里面有'getStatistics3,GET'，该模块显示，如果没有则不显示

至此就可以通过v-permission来控制模块是否有显示权限了