基于shiro+jwt的真正rest url权限管理,前后端分离

太过爱你忘了你带给我的痛 2022-05-12 08:26 157阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/13277.html][http_www.demodashi.com_demo_13277.html]

# bootshiro & usthe #

*  `bootshiro`是基于`springboot+shiro+jwt`的真正`restful URL`资源无状态认证权限管理系统的后端
 *  `usthe`是`restful URL`资源无状态认证权限管理系统的前端,基于`angular+typeScript+adminLte`
 *  区别于一般,提供页面可配置式的,动态的 `restful api` 安全管理支持
 *  数据传输动态秘钥加密,`jwt`过期刷新,用户操作监控等 加固应用安全

## 使用和一些约定 ##

--------------------

*  您使用此项目在后端开发好`api`后,需要在前端页面 资源配置->API管理 新增基于`ant`匹配风格的`api`(约定没有配置的api没有保护)
 *  `eg:` 获取角色关联的对应用户列表 `rest-url`为 `/role/user/{roleId}/{currentPage}/{pageSize}`访问方式为`GET`, 您需要在页面新增`api:` `/role/user/*/*/*` `GET`方式
 *  自定义`url`匹配链约定为 `url=` `url+"=="+httpMethod`
 *  页面添加了`api`后,您需要在 资源配置->角色管理 配置您想要授权角色的API,菜单,关联用户等资源(约定授权给`auth_anon`角色的`api`可以被所有人访问,注意没有授权给任何角色的api是可以被任何人访问的)
 *  授权菜单在第一次登录时已经获取存储到`sessionStorage`防止重复获取,您授权变更菜单之后想要看的效果需要关闭页面重新打开(或者清除`sessionStorage`之后会自动获取授权菜单)
 *  have fun

## 项目的基础框架设计： ##

总的长这样：  
![ZlwWg9SiHsOr9bwTSc1.png][]

#### 前端usthe ####

基于`angular5 + angular-cli + typeScript + rxjs + bootstrap + adminLTE`,践行angular最佳实践。  
过程中node,webpack等有用到过,但我不熟。。。

#### 后端bootshiro ####

基于`springboot + apache shiro + mybatis`框架，restful风格api，自定义状态码，json-web-token，druid数据库连接池，swagger文档生成，redis存储refreshtoken和动态秘钥，maven，MD5单向加密和AES双向等。。。

#### gate -nginx ####

这个nginx作为反向代理服务器，解决了跨域,真实IP头(现服务器端支持跨域可不用nginx)。另一个nginx作为angular应用服务器，tomcat作为bootshiro的服务器。

反向代理的nginx.conf见: [conf][]

#### 持续集成 ####

流程长这样~：  
![Mh3KGNmE4Y8KGPk63Rm.png][]

详细实现技术见另一篇: [docker学习][docker]

## 相关文档 ##

--------------------

*  [前后端分离实践][Link 1]
 *  [api权限管理系统与前后端分离实践][api]
 *  [基于shiro的改造集成真正支持restful请求][shiro_restful]
 *  [签发的用户认证token超时刷新策略][token]
 *  [传输密码动态加密解密][Link 2]  
    ps(之前是写在下面的太长有点乱)

## 部署 ##

--------------------

1 IDE启动调试

1.1 bootshiro

*  下载demo解压bootshiro
 *  用idea导入bootshiro
 *  更改开发环境mysql数据库和redis地址(前提安装数据库并导入usthe.sql创建数据库usthe)
 *  运行BootshiroApplication
 *  bootshiro就可以提供api了 [http://localhost:8080][http_localhost_8080]
 *  推荐使用postman进行api调试

1.2 usthe

*  下载demo解压usthe
 *  用WebStorm导入
 *  需要node环境
 *  安装angular cli工具 npm install -g @angular/cli@latest
 *  进入项目目录 npm install
 *  修改/src/environments/environments.ts开发环境的apiBaseUrl
 *  前提您已经安装部署了nginx并配置相关代理url
 *  ng serve 启动
 *  前提启动了后端bootshiro
 *  访问浏览器ok [http://localhost:4200][http_localhost_4200]

2 docker本地启动

2.1 bootshiro  
\- 更改生产环境mysql数据库和redis地址(前提安装数据库并导入usthe.sql创建数据库usthe)  
\- 前提已经存在maven环境,docker环境([docker常用看这里][docker])  
\- mvn clean install -Dmaven.test.skip=true打出jar包  
\- 在项目目录下 docker build -t bootshiro:1.0 .  
\- docker images看是否生成镜像成功  
\- 运行 docker run -d -p 8080:8080 –name haiGirl bootshiro:1.0  
\- docker ps 就可以看见您的haiGirl了  
\- bootshiro就可以提供api了 [http://localhost:8080][http_localhost_8080]

2.2 usthe

*  修改/src/environments/environments.prod.ts生产环境的apiBaseUrl
 *  前提您已经安装部署了nginx并配置了相关代理url,也存在docker环境([docker常用看这里][docker])
 *  在项目目录下 docker build -t usthe:1.0 .
 *  docker images看是否生成镜像成功
 *  运行 docker run -d -p 4300:4200 –name haiLady usthe:1.0
 *  docker ps 就可以看见您的haiLady了
 *  前提部署了后端[bootshiro][]
 *  访问浏览器 [http://localhost][http_localhost]

3 jenkins+docker持续集成持续部署CICD

3.1 bootshiro

*  更改生产和开发环境mysql数据库和redis地址(前提安装数据库并导入usthe.sql创建数据库usthe)
 *  搭建CICD环境有点繁琐，[看这里最下面][docker]
 *  参照搭建完成后,bootshiro对应的jenkins下运行shell:

““

# !/bin/bash #

# build in jenkins sh #

# docker docker hub仓库地址,之后把生成的镜像上传到 registry or docker hub #

REGISTRY\_URL=127.0.0.1:5000

# docker login –username tomsun28 –password xxxx #

# 根据时间生成版本号 #

TAG=REGISTRYURL/  R E G I S T R Y U R L / JOB\_NAME:`date +%y%m%d-%H-%M`

# 使用maven 镜像进行编译 打包出 jar 文件 #

docker run –rm –name mvn -v /opt/dockerWorkspace/maven:/root/.m2 \\  
\-v /opt/dockerWorkspace/jenkins\_home/workspace/$JOB\_NAME:/usr/src/mvn -w /usr/src/mvn/ \\  
tomsun28/maven:1.0 mvn clean install -Dmaven.test.skip=true

# 使用放在项目下面的Dockerfile打包生成镜像 #

docker build -t TAG  T A G WORKSPACE/.

docker push TAGdockerrmi  T A G d o c k e r r m i TAG

# 判断之前运行的容器是否还在，在就删除 #

if docker ps -a | grep -i JOBNAME;thendockerrm−f  J O B N A M E ; t h e n d o c k e r r m − f JOB\_NAME  
fi

# 用最新版本的镜像运行容器 #

docker run -d -p 8085:8080 –name JOBNAME−v/opt/dockerWorkspace/tomcat/  J O B N A M E − v / o p t / d o c k e r W o r k s p a c e / t o m c a t / JOB\_NAME/logs:/opt/tomcat/logs $TAG

““

3.2 usthe

*  更改生产和开发环境对应的/src/environments/environments apiBaseUrl
 *  搭建CICD环境有点繁琐，[看这篇最下面][docker]
 *  参照搭建完成后,usthe对应的jenkins下运行shell:

““

# !/bin/bash #

# build in jenkins sh #

# docker docker hub仓库地址,之后把生成的镜像上传到 registry or docker hub #

REGISTRY\_URL=127.0.0.1:5000

# docker login –username tomsun28 –password xxxx #

# 根据时间生成版本号 #

TAG=REGISTRYURL/  R E G I S T R Y U R L / JOB\_NAME:`date +%y%m%d-%H-%M`

# 使用放在项目下面的Dockerfile打包生成镜像 #

docker build -t TAG  T A G WORKSPACE/.

docker push TAGdockerrmi  T A G d o c k e r r m i TAG

# 判断之前运行的容器是否还在，在就删除 #

if docker ps -a | grep -i JOBNAME;thendockerrm−f  J O B N A M E ; t h e n d o c k e r r m − f JOB\_NAME  
fi

# 用最新版本的镜像运行容器 #

docker run -d -p 4200:80 –name JOBNAME  J O B N A M E TAG

““

### web部分介绍： ###

##### 技术框架部分 #####

springboot 前后端分离那种，后台springboot，前端angular，数据库操作使用 mybatis

##### 功能介绍： #####

*  菜单管理
 *  API管理，对所要保护的后台api管理，后台的api需要在这里登记
 *  角色管理，包含角色管理，角色所授权菜单管理，角色所授权api管理，角色关联用户管理
 *  用户日志

### 项目结构 ###

下载后，看到如下的文件包：  
![8hPObEfdqm9h7v3vAgg.jpg][]

> 项目代码结构图如下：

其中tomsun28-bootshiro-master.zip结构如下：

![3D2aswZQJgNebudSeJE.png][]

其中tomsun28-usthe-master.zip结构如下：  
![0t4neI8TERgHoKYWbhK.png][]

### 效果展示 ###

![72lHDP0oWJWNbu9h9jL.png][]

![3XwKjzKmugsd2YJFJg8.png][]

![ts8oXiUXkUvlqvGd69X.png][]

![BxdTd2Nu1EdwCMMi0Q9.png][]

thanks:

[Howieair][]的小猪图标  
[zhangkaitao][]的跟我学shiro  
网络上前辈们的教程文章开源项目

基于shiro+jwt的真正rest url权限管理,前后端分离

> 代码地址如下：  
> [http://www.demodashi.com/demo/13277.html][http_www.demodashi.com_demo_13277.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_13277.html]: http://www.demodashi.com/demo/13277.html
[ZlwWg9SiHsOr9bwTSc1.png]: /images/20220512/0f88f253d32a4921830ba1d140db950d.png
[conf]: https://github.com/tomsun28/DockerFile/blob/master/nginx/nginx.conf
[Mh3KGNmE4Y8KGPk63Rm.png]: /images/20220512/24da65695abc4ea9bc4eec7476203947.png
[docker]: https://segmentfault.com/a/1190000013088818
[Link 1]: https://segmentfault.com/blog/tomsun28
[api]: https://segmentfault.com/a/1190000014368885
[shiro_restful]: https://segmentfault.com/a/1190000014545172
[token]: https://segmentfault.com/a/1190000014545422
[Link 2]: https://segmentfault.com/a/1190000014544933
[http_localhost_8080]: http://localhost:8080
[http_localhost_4200]: http://localhost:4200
[bootshiro]: https://github.com/tomsun28/bootshiro
[http_localhost]: http://localhost
[8hPObEfdqm9h7v3vAgg.jpg]: /images/20220512/3526cf3e797242d08aab2b20a68bce26.png
[3D2aswZQJgNebudSeJE.png]: /images/20220512/3b804acfd2164d90a768703dfa1fdf71.png
[0t4neI8TERgHoKYWbhK.png]: /images/20220512/f67a5443a95d476f831adc57d70e5b25.png
[72lHDP0oWJWNbu9h9jL.png]: /images/20220512/0b3a27d4dfdd4e5a9dba0916e42e3dba.png
[3XwKjzKmugsd2YJFJg8.png]: /images/20220512/638b82cc5c0d43288dec7fe947023890.png
[ts8oXiUXkUvlqvGd69X.png]: /images/20220512/5d0ead1962ea4fb88d2451d285da59cf.png
[BxdTd2Nu1EdwCMMi0Q9.png]: /images/20220512/c44cf5a406494d93a5bfbf3732de878a.png
[Howieair]: http://iconfont.cn/user/detail?spm=a313x.7781069.0.d214f71f6&uid=187147
[zhangkaitao]: http://jinnianshilongnian.iteye.com/blog/2018936