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、六步。

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官方教程。

注意事项

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

好了，本文咱们就先说这么多，从下篇文章开始，我会和小伙伴分享这个效果实现的核心思路，欢迎小伙伴们持续关注。

关注公众号，能够及时接收到最新文章:

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