前后端分离的权限管理系统设计和实现

代码地址

项目托管在GitHub上，使用Git拉取代码。

前端:https://github.com/jonssonyan/authority-ui

后端: https://github.com/jonssonyan/authority

相关视频

演示视频

部署视频

界面

设计和实现

技术栈

前端: JavaScript、Vue.js Element axios

后端: Java、Spring Boot、Mybatis-plus、 Shiro 、JWT

部署: Docker

数据库设计

代码设计

1. 动态权限控制

以下是项目中的一处代码:

@RequiresRoles({"admin"})
@RequiresPermissions({"menuList:add", "menuList:update"})
public Result saveOrUpdate(@RequestBody MenuList menuList) {
}

权限框架使用的是Shiro，通过Shiro的注解实现接口的权限，可以设置接口必须要有某个权限或者某个角色才可以访问。一个账户可以关联一个角色，一个角色可以关联多个权限，
通过数据库中的user permission role role_permission相互的关联实现动态权限控制。

2. 接口安全

通过JWT颁发token的方式实现前后端接口的安全。前端将token存档在Cookie中，每次请求接口是携带token。并通过Hibernate Validator实现参数校验。

3. 无限层级分类设计

category表中的parent_id(父级id) path(搜索路径，例如1-) level(表示当前节点到根节点的距离或者层级)三个字段实现无限层级。

4. 接口文档

通过Swagger实现，接口文档地址为localhost/IP:8888/authority/swagger-ui.html

项目部署

打包项目

前端使用npm包管理器，可以使用npm run build命令将前端项目打包，最终打包好的文件夹在 dist 文件夹下

后端使用Maven进行依赖管理，可以通过 Maven 将项目打成.jar的格式。

上传文件至服务器

在根目录新建 myDate 文件夹，里面存放上传的文件。如图所示，authority.jar 是后端文件，dist 是前端文件夹。

部署Docker

1. 安装Docker

# 安装 yum-utils 软件包
yum install -y yum-utils
# 设置稳定的存储库（使用阿里云镜像）
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum makecache fast # 更新缓存
# 安装最新版本的 Docker Engine 和容器，或转到下一步以安装特定版本
yum install docker-ce docker-ce-cli containerd.io
# 启动 Docker
systemctl start docker

2. 设置Docker国内镜像

Docker 默认的镜像源于国内而言是有些慢，所以可以配置一下国内的镜像源，提高一下 docker pull 命令的下载速度

阿里云镜像服务参考：https://cr.console.aliyun.com/cn-shanghai/instances/mirrors

# 创建目录
mkdir -p /etc/docker 
# 添加163镜像到配置文件
cat >/etc/docker/daemon.json <<EOF
{
 "registry-mirrors":["https://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn"]
}
EOF 
# 重新加载文件 重启docker 设置Docker开机自启
systemctl daemon-reload && systemctl restart docker && systemctl enable docker

部署MySQL

# 拉取 Mysql 5.7.31 镜像
docker pull mysql:5.7.31
# 运行 Mysql 5.7.31
docker run -d --name myMysql -p 9506:3306 -v /data/mysql:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 mysql:5.7.31

参数解释:

• -d 后台运行容器，并返回容器 ID
• --name 为容器指定一个名称
• -p 指定端口映射，格式为：主机(宿主)端口:容器端口
• -v 绑定一个卷，容器的 /var/lib/mysql 映射到 主机的目录 /data/mysql
• -e MYSQL_ROOT_PASSWORD=123456 设置环境变量，密码设置为 123456
• mysql:5.7.31 使用镜像 mysql:5.7.31

部署好MySQL之后，导入数据库文件，SQL文件在后端项目/src/main/resources/sql/文件夹下。

打包后端并运行为容器

在 jar 包的同一级文件夹下新建 Dockerfile 文件，文件内容如下

FROM java:8
VOLUME /tmp
ADD authority.jar authority.jar
EXPOSE 8888
ENTRYPOINT ["java","-jar","/authority.jar"]

参数解释:

• from java:8 拉取一个 jdk 为 1.8 的 docker image
• ADD jar包添加至容器中
• expose 该容器暴露的端口是多少，就是 jar 在容器中以多少端口运行
• ENTRYPOINT 容器启动之后执行的命令，java -jar /authority.jar 即启动 jar

# 打包镜像
docker build -t authority .
# 运行容器
docker run -d -p 8888:8888 --name authority-8888 authority

打包前端并运行为容器

在前端文件夹 dist 的同一级文件夹下新建 Dockerfile 文件，文件内容如下

FROM nginx:latest
COPY ./dist /usr/share/nginx/html/
EXPOSE 80

# 打包镜像
docker build -t authority-ui .
# 运行容器
docker run -d -p 80:80 --name authority-ui-80 authority-ui

最终效果

• authority-ui--80 前端容器
• authority-8888 后端容器
• myMysql 数据库容器

打开浏览器访问服务器 IP地址 即可