在前面的权限设计后进行实际操作后,发现了很多不足,为什么说时第一版权限,因为这一版权限我没有加修改功能,不是不能加是设计缺陷,修改一个权限没问题,但是因为是带等级的权限,老大没了权限下面的附属怎么可以有呢,这个就不适用于一张表来做,但是基于整体考虑我还是做完了一版。
项目试玩地址
账号除了admin不支持同时登录
系统账号:admin
密码:123456
数据库部分
user 表单作为用户账号表
branch 角色表
privs 权限表
表与表的关系
user 多对多关联 branch ;
branch 多对多关联 privs;
接口代码部分
代码也忒多了,就不一一展示了,看一下下面添加角色的代码就能体会到一张表设计分级权限就是个坑,但是我还是跳了。
角色添加接口代码
很多地方做了封装,不然代码更多。
router.post('/role', async (ctx, next) => {
try{
const { first = "",second = "",third = "",fourth = "",fifth = "",privs = [] } = ctx.request.body;
let level = 0;
let name = '';
if(second === ""){
level = 1;
name = first;
}else if(third === ""){
level = 2;
name = second ;
}else if(fourth === ""){
level = 3;
name = second + third;
}else if(fifth === ""){
level = 4;
name = second + third + fourth;
}else{
level = 5;
name = second + third + fourth + fifth;
}
let param = {
first,
second,
third,
fourth,
fifth,
status:0,
level,
name
}
const bo = await tools.search(Demo.Branch,{first,second,third,fourth,fifth},"all");
const boAll = await tools.search(Demo.Branch,{},"all");
if(bo.length === 0&&boAll.length < 10000){
await tools.action(Demo.Branch,param,"add");
const newRole = await tools.search(Demo.Branch,{first,second,third,fourth,fifth},"all");
const roleId = newRole[0].id;
const role = await tools.search([Demo.Branch,Demo.Privs],{id:roleId},"connection");
const adPrivs = await tools.search(Demo.Privs,{id:privs} ,"all");
await role[0].addPrivs(adPrivs);
ctx.body = {
"retCode": true,
"resultMsg": "添加成功",
"errorCode": null,
"data": {
}
}
}else{
if(boAll.length < 10000){
ctx.body = {
"retCode": false,
"resultMsg": "已存在请勿重复添加",
"errorCode": null,
"data": {
}
}
}else{
ctx.body = {
"retCode": false,
"resultMsg": "角色数量达到上限",
"errorCode": null,
"data": {
}
}
}
}
}catch(e){
//TODO handle the exception
ctx.body = {
"retCode": false,
"resultMsg": "网络错误",
"errorCode": null,
"data": {
}
}
}
})
前端部分
自己造轮子
自己弄了一款样式,自己觉得还可以,配上权限的逻辑后,原地删了。
轮子哥说过“不要重复造轮子” 我其实就喜欢自己造轮子,工作中都是利用组件或者别人写好的代码去完成工作,但这仅仅是为了挤出我学习的时间,个人不认为自己很聪明,也没有扎实的基础,我的学习就是通过用轮子然后仿照造轮子去学习,对我而言逻辑和大局观是我的关心点而不是基础知识。 学习方式因人而异,找到适合自己的就是最好的。
别人的轮子还是香的
前端权限部分最后还是采用ElementPlus的tree树组件去完成的,而且样式规规矩矩的就很合理。
技术栈
- koa2
- sequelize
- vue.js
- vue-router
- vue-vuex
- vue-axios
- ElementUI
- iconfont