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

简介: SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助。

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

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


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


数据库设计

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




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


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):



 



整体效果

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




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




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




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




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


项目地址

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


项目地址: 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

1

2

3

4

5

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


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


npm run build

1

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


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


注意事项

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

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

作者:_江南一点雨 

来源:CSDN 

原文:https://blog.csdn.net/u012702547/article/details/79010010

版权声明:本文为博主原创文章,转载请附上博文链接!

相关文章
|
16天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
91 1
|
23天前
|
安全 Java 关系型数据库
springboot整合springsecurity,从数据库中认证
本文介绍了如何在SpringBoot应用中整合Spring Security,并从数据库中进行用户认证的完整步骤,包括依赖配置、数据库表创建、用户实体和仓库接口、用户详情服务类、安全配置类、控制器类以及数据库初始化器的实现。
60 3
springboot整合springsecurity,从数据库中认证
|
20小时前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
基于Java+Springboot+Vue开发的大学竞赛报名管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的大学竞赛报名管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
162 3
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
|
17天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第8天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建并配置 Spring Boot 项目,实现后端 API 和安全配置。接着,使用 Ant Design Pro Vue 脚手架创建前端项目,配置动态路由和菜单,并创建相应的页面组件。最后,通过具体实践心得,分享了版本兼容性、安全性、性能调优等注意事项,帮助读者快速搭建高效且易维护的应用框架。
23 3
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的蛋糕商城管理系统
基于Java+Springboot+Vue开发的蛋糕商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的蛋糕商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
101 3
基于Java+Springboot+Vue开发的蛋糕商城管理系统
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的美容预约管理系统
基于Java+Springboot+Vue开发的美容预约管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的美容预约管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
48 3
基于Java+Springboot+Vue开发的美容预约管理系统
|
18天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第7天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建 Spring Boot 项目并配置 Spring Security。接着,实现后端 API 以提供菜单数据。在前端部分,使用 Ant Design Pro Vue 脚手架创建项目,并配置动态路由和菜单。最后,启动前后端服务,实现高效、美观且功能强大的应用框架。
20 2
|
23天前
|
JavaScript 前端开发 数据可视化
【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。
【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。
42 0
|
23天前
|
JavaScript 前端开发 Java
Springboot+vue实现文件的下载和上传
这篇文章介绍了如何在Springboot和Vue中实现文件的上传和下载功能,包括后端控制器的创建、前端Vue组件的实现以及所需的依赖配置。
140 0