页面权限控制(动态路由):
-
前端创建asyncRoutes,添加meta: { auth: true },
auth 为false时不受权限控制,都会显示。 -
后端返回有权限的menu tab button,tab,
routes.push(resRoutes[‘Tab’][route.name] || !route.meta.auth) -
在router.beforeEach 里 router.addRoutes
-
用户管理里,可以添加用户的角色,不可修改自己角色
-
角色管理里,可以配置角色权限 权限配置用tree星控件
按钮权限控制:
- 后端返回有权限得menu tab button。 button存储至
this.$store.state.buttonPermission
2.添加指令
Vue.directive('permission', {
bind: function (el, binding, vnode) {
const permissionMap = vnode.context.$store.state.permissionRoutes.buttonPermission
if (binding.arg && !permissionMap[binding.arg]) {
el.style.display = 'none'
}
}
})
- 使用
<el-button size="mini" type="primary"
v-permission:opinvoice @click="handleView(scope.$index, scope.row)">按钮1</el-button>