源代码在GitHub - 629y/course: Spring Cloud + Vue前后端分离-在线课程

Spring Cloud + Vue前后端分离-第12章 通用权限设计

这一章我们不依赖第三方框架，我会从权限相关表的设计，到权限的配置，到权限的拦截，带大家一步一步的做出一个通用的权限设计方案。

12-1 通用权限解决方案介绍

权限拦截的对象：用户

权限拦截的点：菜单、路由、接口、按钮

控制用户对资源的访问

权限的操作：配置、读取、拦截

100用户 * 100资源

直接用用户和资源做关联来控制权限，适合小型的项目，简单，快速

三个核心概念：用户、角色、资源

100用户 * 2个角色 + 2个角色 * 100资源

经典的权限管理设计：用户和角色关联，角色和资源关联

功能点：

配置：

        用户管理：用户表，用户管理界面，已完成

        资源配置：资源表，资源配置界面

        角色管理：角色表，角色管理界面

        用户角色关联配置：用户角色关联表，复用角色管理界面

        角色资源关联配置：角色资源关联表，复用角色管理界面

两张关联表的配置，可以单独设计界面，也可以直接做到角色管理界面里。

读取：

        用户权限的读取：用户登录的时候，读取该用户的所有权限。

登录时，通过用户角色关联表，可以知道当前登录用户的角色，再通过角色资源关联表就可以查到当前用户所有的资源

拦截：

        用户操作业务时，进行权限拦截

                前端界面：菜单，路由，按钮，hidden disabled

                后端接口：接口，gateway的过滤器

疑问：前端已经对菜单和按钮做拦截，用户不能操作了，为什么还要对接口做拦截？

重要提示：所有前端的设计都是不安全的。

例登录名被修改了，说明我们的接口没有做登录名不可修改的校验，因为我们认为给登录名加了disabled就可以了，这是一个常见的安全隐患。

权限初始化

系统上线时，要初始化这五张表的数据。初始有一个用户能登录，能管理角色，管理资源，分配权限。

前面的章节的讲解模式是从简单的功能入手，再不断的扩展和完善，这一章，我们换一种模式，就会先分析需求，再列出功能点，明确总体要做哪些功能，再开始开发。

在实际工作中，也是用这种模式，我们还会加入团队评审的环节，确保我们的功能不会做歪了。

中高级面试题：请简单的设计一个权限管理功能，对初级人员来说会有点难，不过学完这一章，就不是问题了。

12-2 资源配置管理

资源表的设计与基本代码生成

1.通用权限管理：资源表的设计与基本代码生成

资源的名称一般是用页面上看得见的元素：菜单、按钮等。

all.sql

如果一个页面的所有操作统一控制权限，request可以填相关接口的前缀

生成代码

ResourceService.java报错原因：资源表的实体类是Resource和@Resource注解同名，导致冲突 

admin.vue

router.js

测试

资源树的保存

1.通用权限管理：资源树的保存

资源点是开发阶段就确定的，所以并不是上线后再一个一个配置的。

资源管理最简单的一种方案：上线前准备好sql，刷库。

将资源管理做成资源树进行管理。

填入数据：带有层级结构的json字符串

resource.json

用法：以后开发新功能的时候，就在该文件里加入新的资源，可以上线前将新的资源json通过控台保存进数据库。

resource.vue

ResourceDto.java

ResourceService.java

将节点一个一个的取出来，放入list中 

ResourceController.java

测试

资源树的显示

1.通用权限管理：资源树的显示

resource.vue

ResourceController.java

ResourceService.java

资源的保存是将树结构转成列表，重点是children属性；资源的显示是将列表转成树结构，重点是parent属性。

小知识：一边循环list，一边删除list中的对象，可以使用倒序循环。

list中有父节点的对象都会被remove掉，最终留下来的就是顶级的节点。

测试

12-3 角色权限管理

基本的角色管理功能

1.通用权限管理：增加基本的角色管理功能

2.资源列表补全

all.sql

admin.vue

router.js

resource.json

[{"id" : "01","name": "系统管理","children": [{"id" : "0101","name": "用户管理","page": "/system/user","children": [{"id": "010101","name": "保存","request": ["/system/admin/user/list","/system/admin/user/save"]},{"id": "010102","name": "删除","request": ["/system/admin/user/delete"]},{"id": "010103","name": "重置密码","request": ["/system/admin/user/save-password"]}]},{"id" : "0102","name": "资源管理","page": "/system/resource","children": [{"id": "010201","name": "保存/显示","request": ["/system/admin/resource"]}]},{"id" : "0103","name": "角色管理","page": "/system/role","children": [{"id": "010301","name": "角色/权限管理","request": ["/system/admin/role"]}]}]
},{"id" : "02","name": "业务管理","children": [{"id" : "0201","name": "分类管理","page": "business/category","children": [{"id": "020101","name": "增删改查","request": ["/business/admin/category"]}]},{"id" : "0202","name": "课程管理","page": "business/course","children": [{"id": "020201","name": "增删改查","request": ["/business/admin/course","/business/admin/category/all,/business/admin/teacher/list","/file/f/course","/business/chapter"]}]},{"id" : "0203","name": "讲师管理","page": "business/teacher","children": [{"id": "020301","name": "增删改查","request": ["/business/admin/teacher"]}]}, {"id" : "0204","name": "大章管理","page": "business/chapter","children": [{"id": "020401","name": "增删改查","request": ["/business/admin/course","/business/admin/chapter"]}]},{"id" : "0205","name": "小节管理","page": "business/section","children": [{"id": "020501","name": "增删改查","request": ["/business/admin/section","/business/admin/chapter"]}]}]},{"id" : "03","name": "文件管理","children": [{"id" : "0301","name": "文件管理","page": "file/file","children": [{"id": "030101","name": "文件管理","request": ["/file/admin/file","/file/admin"]}]}]}
]

测试

增加角色资源关联功能

1.通用权限管理：增加角色资源关联功能表，生成持久层和服务端代码

all.sql

点击[关联资源]按钮时，加载资源树

1.通用权限管理：点击[关联资源]按钮时，加载资源树

role.vue

测试

点击资源树模态框【保存】按钮时，保存角色资源关联表

1.通用权限管理：点击资源树模态框【保存】按钮时，保存角色资源关联表

role.vue

RoleDto.java

RoleService.java

RoleController.java

测试

打开资源树模态框时，加载角色资源关联数据，并自动勾选树节点

1.通用权限管理：打开资源树模态框时，加载角色资源关联数据，并自动勾选树节点

role.vue

批量操作的思路：先将原有的删除，再批量新增

RoleService.java

RoleController.java

 测试

增加角色用户关联功能

1.通用权限管理：增加角色用户关联表，生成持久层和服务端代码

all.sql

点击【关联用户】按钮时，加载所有用户，弹出角色用户关联模态框

1.通用权限管理：点击【关联用户】按钮时，加载所有用户，弹出角色用户关联模态框

role.vue

测试

点击用户模态框【保存】按钮时，保存角色用户关联表

1.通用权限管理：点击用户模态框【保存】按钮时，保存角色用户关联表

role.vue

依赖vue的双向数据绑定特性，可以将复杂的页面操作变成简单的数据操作。很多前端框架都有双向数据绑定的特性，比如angular,微信小程序等。

RoleDto.java

RoleService.java

RoleController.java

测试

打开用户模态框时，加载角色用户关联数据

1.通用权限管理：打开用户模态框时，加载角色用户关联数据

role.vue

 查关联表，得到的时userId，但是显示需要的是loginName。这里也可以通过写自定义mapper，把user表和role_user表关联得到loginName

RoleService.java

RoleController.java

测试

12-4 登录时获取资源权限

读取当前登录用户所属的角色的所有资源

1.通用权限管理：登录时，读取当前登录用户所属的角色的所有资源

LoginUserDto.java

一个资源可以会用到多个接口，多个资源的接口就可能重复，所以这里用Set去重

MyUserMapper.xml

MyUserMapper.java

UserService.java

 测试

00000000

00000001 

00000002

 关于User的权限设置比较细，每个请求接口都可以单独控制。关于Resource的权限设置比较粗，所有接口用同一个request控制

12-5 权限拦截功能开发

前端界面权限拦截

前端界面权限拦截，完成用户管理

1.通用权限管理：前端界面权限拦截，完成用户管理

tool.js

admin.vue

在html中要使用vue方法，这个方法得在methods中定义

user.vue

测试

目前只修改了用户管理的权限拦截，以用户管理为例

00000000

每次修改权限配置，需要重新登录后才生效

前端界面权限拦截，完成所有界面控制

1.通用权限管理：前端界面权限拦截，完成所有界面控制

admin.vue

如果一个页面的所有按钮是统一控制的，那么只需要控制菜单就可以了，不需要给每个按钮加权限控制代码。

测试

路由权限判断

1.通用权限管理：前端界面权限拦截，增加路由权限判断

没有资源管理，但是我们可以直接通过路由进入

resource.json

[{"id" : "00","name": "欢迎","page": "welcome"
},{"id" : "01","name": "系统管理","children": [{"id" : "0101","name": "用户管理","page": "system/user","children": [{"id": "010101","name": "保存","request": ["/system/admin/user/list","/system/admin/user/save"]},{"id": "010102","name": "删除","request": ["/system/admin/user/delete"]},{"id": "010103","name": "重置密码","request": ["/system/admin/user/save-password"]}]},{"id" : "0102","name": "资源管理","page": "system/resource","children": [{"id": "010201","name": "保存/显示","request": ["/system/admin/resource"]}]},{"id" : "0103","name": "角色管理","page": "system/role","children": [{"id": "010301","name": "角色/权限管理","request": ["system/admin/role"]}]}]
},{"id" : "02","name": "业务管理","children": [{"id" : "0201","name": "分类管理","page": "business/category","children": [{"id": "020101","name": "增删改查","request": ["/business/admin/category"]}]},{"id" : "0202","name": "课程管理","page": "business/course","children": [{"id": "020201","name": "增删改查","request": ["/business/admin/course","/business/admin/category/all,/business/admin/teacher/list","/file/f/course","/business/chapter"]}]},{"id" : "0203","name": "讲师管理","page": "business/teacher","children": [{"id": "020301","name": "增删改查","request": ["/business/admin/teacher"]}]}, {"id" : "0204","name": "大章管理","page": "business/chapter","children": [{"id": "020401","name": "增删改查","request": ["/business/admin/course","/business/admin/chapter"]}]},{"id" : "0205","name": "小节管理","page": "business/section","children": [{"id": "020501","name": "增删改查","request": ["/business/admin/section","/business/admin/chapter"]}]}]},{"id" : "03","name": "文件管理","children": [{"id" : "0301","name": "文件管理","page": "file/file","children": [{"id": "030101","name": "文件管理","request": ["/file/admin/file","/file/admin"]}]}]}
]

 admin.vue

第一次加载admin.vue时，需要判断路由权限，比如从登录页跳到控台主页，或者刷新控台主页时，会执行mounted.

进入控台主页后，发生子路由跳转时，会触发watch。

测试

后端接口权限判断

1.通用权限管理：增加后端接口权限拦截

在做登录功能时，我们也对接口做了登录校验，否则容易被绕开登录，直接调用后端接口。这里同样需要对接口做权限拦截

重新登录 

可以通过搜索hidden,display:none等，来查看页面是否有隐藏元素

ctrl+f

 可以删除成功，这是非常危险的

 LoginAdminGatewayFilter.java

gateway里没有饮用server模块，所以没用LoginUserDto类。这里转成JSONObject进行操作

比如资源的保存：

path=system/admin/resource/save,

而配置的

request=system/admin/resource,

那么path.contain(request)就是true

测试

可以在vue的拦截器中，针对401返回码做判断，如果是401，就跳到登录页面

将业务场景变成程序代码

需求分析：最终要做成什么样子，如何使用这个功能。

功能点拆分：要实现这个需求，都有哪些功能点。

代码编写

团队内部评审通过后，为每个功能点评优先级，并估工时。

每天早上开展例会，每个人花几分钟的时间回答3个问题：

1.昨天做了哪些内容；

2.有没有遇到什么问题；

3.今天准备做哪些内容。

有问题一定要反馈出来，可以是遇到新技术了，或是功能点比想象中复杂，工时估少了等等。