- 宣传官网 http://xb.exrick.cn
- 在线Demo http://xboot.exrick.cn
- 开源版Github地址 https://github.com/Exrick/x-boot
- 开发文档 https://www.kancloud.cn/exrick/xboot/1009234
- 获取完整版 http://xpay.exrick.cn/pay?xboot
在这里插入图片描述
按钮权限
将用户操作权限列表存入路由数据结构的meta字段中，注册全局指令，当点初次渲染时，判断传入的参数是否在当前路由页面权限列表中，若不存在，则直接删除该节点
- 动态路由JSON数据示例
component: "access/access"
icon: "md-lock"
id: "16392767785668608"
level: 2
name: "access_index"
parentId: "16392452747300864"
path: "index"
permTypes: ["add", "edit", "delete"]
title: "权限按钮测试页"
- 从后台读取菜单数据构造路由节点时将permTypes存入，详见
src/libs/util.js
// 生成路由节点
util.initRouterNode = function (routers, data) {
...
// 给页面添加权限
meta.permTypes = menu.permTypes ? menu.permTypes : null;
...
};
- 定义全局命令组件，判断页面拥有权限删除节点，详见
src/libs/hasPermission.js
const hasPermission = {
install (Vue, options) {
Vue.directive('has', {
inserted (el, binding, vnode) {
let permTypes = vnode.context.$route.meta.permTypes;
if (!permTypes.includes(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
}
};
export default hasPermission;
- 全局注册组件，详见
src/main.js
import hasPermission from '@/libs/hasPermission'
Vue.use(hasPermission);
上述方式的优点：每个页面只处理其拥有的权限，无大量权限数据需要判断
缺点：不在动态路由中的页面节点不受控制，解决方案：见下方使用角色权限
角色权限
原理大致同上，该方式虽然不能细化权限控制，但其优点为可全局直接使用，无需配置
- 用户成功登录后将其角色信息存入LocalStorage中，详见
src/views/login.vue
this.setStore("roles", roles);
- 定义全局命令组件，判断页面拥有权限删除节点，详见
src/libs/hasRole.js
import { getStore } from './storage';
const hasRole = {
install (Vue, options) {
Vue.directive('hasRole', {
inserted (el, binding) {
let roles = getStore("roles");
if (!roles.includes(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
}
};
export default hasRole;
- 全局注册组件，详见
src/main.js
import hasRole from '@/libs/hasRole'
Vue.use(hasRole);
扩展
如需使用多个权限为与、或规则，自行参考下方代码使用，由于作者没有用到，有需要的自行加入代码
// 必须包含列出的所有权限，元素才显示
export const hasPermission = {
install (Vue) {
Vue.directive('hasPermission', {
bind (el, binding, vnode) {
let permTypes = vnode.context.$route.meta.permTypes;
let value = binding.value.split(',')
let flag = true
for (let v of value) {
if (!permTypes.includes(v)) {
flag = false
}
}
if (!flag) {
el.parentNode.removeChild(el)
}
}
})
}
}
// 当不包含列出的权限时，渲染该元素
export const hasNoPermission = {
install (Vue) {
Vue.directive('hasNoPermission', {
bind (el, binding, vnode) {
let permTypes = vnode.context.$route.meta.permTypes;
let value = binding.value.split(',')
let flag = true
for (let v of value) {
if (permTypes.includes(v)) {
flag = false
}
}
if (!flag) {
el.parentNode.removeChild(el)
}
}
})
}
}
// 只要包含列出的任意一个权限，元素就会显示
import { getStore } from './storage';
export const hasAnyPermission = {
install (Vue) {
Vue.directive('hasAnyPermission', {
bind (el, binding, vnode) {
let permissions = vnode.context.$store.state.account.permissions
let value = binding.value.split(',')
let flag = false
for (let v of value) {
if (permissions.includes(v)) {
flag = true
}
}
if (!flag) {
el.parentNode.removeChild(el)
}
}
})
}
}
// 必须包含列出的所有角色，元素才显示
import { getStore } from './storage';
export const hasRole = {
install (Vue) {
Vue.directive('hasRole', {
bind (el, binding, vnode) {
let roles = getStore("roles");
let value = binding.value.split(',')
let flag = true
for (let v of value) {
if (!roles.includes(v)) {
flag = false
}
}
if (!flag) {
el.parentNode.removeChild(el)
}
}
})
}
}
// 只要包含列出的任意一个角色，元素就会显示
export const hasAnyRole = {
install (Vue) {
Vue.directive('hasAnyRole', {
bind (el, binding, vnode) {
let roles = getStore("roles");
let value = binding.value.split(',')
let flag = false
for (let v of value) {
if (roles.includes(v)) {
flag = true
}
}
if (!flag) {
el.parentNode.removeChild(el)
}
}
})
}
}
- 以上方式使用示例：
<div v-hasPermission="'add','edit'">XBoot</div>
<div v-hasAnyPermission="'add','edit'">XBoot</div>
<div v-hasRole="'ROLE_ADMIN','ROLE_USER'">XBoot</div>
<div v-hasAnyRole="'ROLE_ADMIN','ROLE_USER'">XBoot</div>
