github: 后台管理系统
1. 后台配置界面
1.1 通过角色管理添加新角色和新角色的路由权限(路由权限通过读取 src/router/router.ts)
// permission.ts
// 解析从router.ts下读取的路由，生成默认权限树
``` js
parseRoutes(routers: Array < any > ) {
return Array.isArray(routers) && routers.reduce((arr, route) => {
if (route.hidden) { // hidden为ture时，路由不显示
return arr
}
let o = < any > {}
o.title = route.name
o.checked = false
o.children = route.children && this.parseRoutes(route.children)// 有子级路由时，递归调用
return arr.concat(o)
}, [])
}
```1.2 确认添加新角色或者修改角色路由权限，调用addOrEditRole
// permission.ts
// 添加新角色，根据路由权限，筛选指令权限
// 修改角色， 缓存上一次的指令权限，和新指令权限进行对比
``` js
addOrEditRole() {
let allCheckedNodeName = this.getActiveNodes((this.$refs.routeTree as any).getCheckedNodes()) // 获取所有选中路由权限名
let prevPermission: any = deepCop(this.role.permission) // 缓存上一次指令权限
// ...
this.selectedRoutes(this.role.routes, allCheckedNodeName) // 根据当前角色的路由权限，筛选出指令对应的指令权限
if (this.ModalType === 'new') {
// 添加新角色
// ...
} else { // 修改角色指令权限
/**
* 路由同步
* 缓存上次指令权限 和 这次指令权限有相同的 路由权限
* 缓存上次指令权限覆盖这次指令权限
*/
prevPermission.length && prevPermission.forEach((oldPermission: any) => {
this.role.permission.forEach((newPermission: any, index: number, newArray: Array < any > ) => {
let oldkey = Object.keys(oldPermission)
if (oldkey.includes(this.gatherKey(newPermission))) {
newArray[index] = oldPermission
}
})
})
}
}
```
1.3 指令权限修改
