后台管理系统按钮级别权限的实现原理

后台管理系统按钮级别权限的实现原理

指令的方式

• 定义全局指令directive（'has'），insert：（el,binding）
• 用户登录后即可获取改用户的按钮级别权限数组btns；
• 将按钮上v-has绑定的值传过来（binding.value）；
• 判断'PEMS_PATH_ABC'是否存在于btns中；
• 不存在的话删除该元素，使该元素不能显示；
• 只是前端的一层校验（不安全），需要后端二次校验。

附上源代码：

import Vue from 'vue'
// import { mapState } from 'vuex'
import store from '@/store'
// **权限指令**
Vue.directive('has', {
    inserted: (el, binding) => {
        const btns = store.state.info.limitsList
        const value = 'PEMS_PATH_' + binding.value.toUpperCase()
        if (btns.length > 0 && !btns.includes(value)) {
            el.parentNode.removeChild(el)
        }
    }
})
```
```