vuex中用户信息中的权限列表
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo: {
name: 'Suk',
roles: ['add', 'delete'] // 管理员有哪些权限
}
},
mutations: {},
actions: {},
getters: {},
})
export default store
页面按钮:
<template>
<div class="test">
{{ userInfo.name }}拥有的按钮权限:
<el-button data-rule="add" v-btn-show="userInfo.roles">新增</el-button>
<el-button data-rule="delete" v-btn-show="userInfo.roles">删除</el-button>
<el-button data-rule="update" v-btn-show="userInfo.roles">修改</el-button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['userInfo'])
},
directives: {
'btn-show': {
inserted: (el, binding) => {
// 获取到传进来的用户权限列表
const userRoles = binding.value
// 获取按钮自身需要的权限
const btnRule = el.getAttribute('data-rule')
// 判断用户是否有当前按钮权限,没有就移除按钮不显示
if (!userRoles.includes(btnRule)) {
el.parentNode.removeChild(el)
}
}
}
}
}
</script>
<style></style>
页面上就只显示新增和删除按钮啦~