SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法


Posted in Javascript onJanuary 09, 2018

当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开源项目 在运行),因此小伙伴们只能将就看一下下面的截图了,文末有部署教程,部署到本地也可以查看完整效果。

本文我们先不聊具体实现,我先来介绍一下我这个权限管理模块的一个整体架构,以及最终呈现出来的效果。

数据库设计

权限数据库主要包含了五张表,分别是资源表、角色表、用户表、资源角色表、用户角色表,数据库关系模型如下:

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法 

关于这个表,我说如下几点:

1.hr表是用户表,存放了用户的基本信息。

2.role是角色表,name字段表示角色的英文名称,按照SpringSecurity的规范,将以 ROLE_ 开始,nameZh字段表示角色的中文名称。

3.menu表是一个资源表,该表涉及到的字段有点多,由于我的前端采用了Vue来做,因此当用户登录成功之后,系统将根据用户的角色动态加载需要的模块,所有模块的信息将保存在menu表中,menu表中的path、component、iconCls、keepAlive、requireAuth等字段都是Vue-Router中需要的字段,也就是说menu中的数据到时候会以json的形式返回给前端,再由vue动态更新router,menu中还有一个字段url,表示一个url pattern,即路径匹配规则,假设有一个路径匹配规则为 /admin/** ,那么当用户在客户端发起一个 /admin/user 的请求,将被 /admin/** 拦截到,系统再去查看这个规则对应的角色是哪些,然后再去查看该用户是否具备相应的角色,进而判断该请求是否合法。

下图分别是用户表、角色表以及资源表中的部分数据(数据库脚本可以在文末的项目地址中下载,位置 resources/vhr.sql ):

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法

整体效果

首先,不同的用户在登录成功之后,根据不同的角色,会看到不同的系统菜单,完整菜单如下:

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法 

不同用户登录上来之后,可能看到的会有差异,如下:

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法 

每个用户的角色是由系统管理员进行分配的,系统管理员给用户分配角色的页面如下:

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法 

系统管理员也可以管理不同角色可以操作的资源,页面如下:

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法 

其他的删除、搜索等一些琐碎的功能我这里就不再一一介绍了。

项目地址

由于商业协议,原本的项目不能共享给各位小伙伴,因此我专门做了一个开源项目,这个项目的功能整体来说比较多,但是考虑到这个系列的文章主要是向大家介绍权限管理模块,因此其他模块都被我暂时阉割掉了,不过小伙伴们可以放心,权限管理模块的代码一行都没有删除,涉及到权限管理的代码和数据都是完整的,可以直接运行的。小伙伴将以管理员的身份登录到后台系统,登录成功之后,依次点击 系统管理->基础信息设置->权限组 ,即可配置不同角色可以操作的资源;然后依次点击 系统管理->操作员管理 ,即可管理每一位操作员的角色。

项目地址: https://github.com/lenve/vhr

快速部署

1.clone项目到本地 git@github.com:lenve/vhr.git

2.数据库脚本放在hrserver项目的resources目录下,在MySQL中执行数据库脚本

3.数据库配置在hrserver项目的resources目录下的application.properties文件中

4.在IntelliJ IDEA中运行hrserver项目

OK,至此,服务端就启动成功了,此时我们直接在地址栏输入 http://localhost:8082/index.html 即可访问我们的项目,如果要做二次开发,请继续看第五、六步。

5.进入到vuehr目录中,在命令行依次输入如下命令:

# 安装依赖
npm install
# 在 localhost:8080 启动项目
npm run dev

由于我在vuehr项目中已经配置了端口转发,将数据转发到SpringBoot上,因此项目启动之后,在浏览器中输入 http://localhost:8080 就可以访问我们的前端项目了,所有的请求通过端口转发将数据传到SpringBoot中(注意此时不要关闭SpringBoot项目)。

6.最后可以用WebStorm等工具打开vuehr项目,继续开发,开发完成后,当项目要上线时,依然进入到vuehr目录,然后执行如下命令:

npm run build

该命令执行成功之后,vuehr目录下生成一个dist文件夹,将该文件夹中的两个文件static和index.html拷贝到SpringBoot项目中resources/static/目录下,然后就可以像第4步那样直接访问了。

步骤5中需要大家对NodeJS、NPM等有一定的使用经验,不熟悉的小伙伴可以先自行搜索学习下,推荐 Vue官方教程 。

注意事项

再次强调,这只是一个权限管理功能模块,运行后只有权限管理功能是完整的。小伙伴们在本地部署成功之后,可以修改每一个用户的角色以及每一个角色可以操作的资源,修改成功之后,注销登录,再以被修改的用户身份登录,即可看到菜单变化。

总结

以上所述是小编给大家介绍的SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
jQuery 表单验证扩展(三)
Oct 20 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 #Javascript
详解webpack babel的配置
Jan 09 #Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 #Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 #Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 #Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 #Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 #Javascript
You might like
让PHP支持页面回退的两种方法
2008/01/10 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
js 省地市级联选择
2010/02/07 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
考试不及格的检讨书
2014/01/22 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
入队仪式主持词
2015/07/04 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
个人工作总结怎么写?
2019/04/09 职场文书