Spring Boot Vue Admin 前后端完全分离的权限控制模版
Spring Boot Vue Admin
简介
提供一套前后端分离的后台权限管理模版,按钮级别的权限控制。
前端 Vue 模板来自 vue-element-admin,其他功能可以根据该项目再进行拓展。
后端 Spring Boot 模板来自种子项目。
预览
RESTful API
主要介绍后端 API 的角色权限控制。参考博文 RBAC 新解。
数据库设计
数据库主要包含五张表,分别是用户表 user、角色表 role、用户角色表 user_role、权限表 permission、角色权限表 role_permission。
数据库关系模型如下:
user 表:用户信息。
role 表:角色信息。
user_role 表:用户对应的角色,一对一。
permission 表:权限能操作的资源以及操作方式。
role_permission 表:角色所对应的权限,一对多。
为什么 ROLE_ADMIN 角色在数据库没有权限?
ROLE_ADMIN 作为超级管理员这类角色,应该是具有所有权限的,但是对于数据库来说,没必要保存所有权限,只要在查询到该角色时返回所有权限即可。
角色权限控制
Spring Security + Json Web Token 鉴权:
最终效果,在控制器上的注解:
@PreAuthorize("hasAuthority('user:list')")
实现思路:用户登录 -> 服务端生成 token -> 客户端保存 token,之后的每次请求都携带该 token,服务端认证解析。
所以在服务端认证解析的 token 就要保存有用户的角色和相应的权限:
// service/impl/UserDetailsServiceImpl.java
// 为了方便,角色和权限都放在一起
// 角色名
authorities.add(new SimpleGrantedAuthority(user.getRoleName()));
// 权限
for (final String permissionCode : user.getPermissionCodeList()) {authorities.add(new SimpleGrantedAuthority(permissionCode));
}
// [ROLE_TEST, role:list, user:list]
JWT 生成 token:
// core/jwt/JwtUtil.java
Jwts.builder()// 设置用户名.setSubject(username)// 添加权限属性.claim(this.AUTHORITIES_KEY, authorities)// 设置失效时间.setExpiration(date)// 私钥加密生成签名.signWith(SignatureAlgorithm.RS256, privateKey).compact();
Base64 解码 JWT 生成的 token:
{"alg":"RS256"}{"sub":"test","auth":"ROLE_TEST,role:list,user:list,"exp":1519742226}<wZJ69e,x 옮J܃a}
@ϋ+sˆvफ़t|Tq
|7uƙ
之后的控制器就可以使用 hasAuthority 和 hasRole 注解控制权限访问了:
@PreAuthorize("hasRole('ROLE_ADMIN') or hasAuthority('user:list')")
axios 预请求和跨域
由于前后端分离,会出现跨域问题,参考跨域资源共享 CORS 详解。
// core/jwt/JwtAuthenticationFilter.java
// 解决跨域问题
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With");
// 明确允许通过的方法,不建议使用*
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Expose-Headers", "*");
// axios 预请求后,直接返回
// 返回码必须为 200 否则视为请求失败
if (request.getMethod().equals("OPTIONS")) {return;
}
redis 缓存
项目默认开了 redis 服务,密码 root。
如不需要请清除所有 redis 相关代码。
快速开始
# 克隆项目
git clone https://github.com/Zoctan/spring-boot-vue-admin.git# 使用其他源,解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org# 安装依赖
npm install# 启动服务
npm run dev
欢迎小伙伴 star 和 issues ~ 谢谢: )
Spring Boot Vue Admin 前后端完全分离的权限控制模版相关推荐
- (五)Debian Linux中部署Spring Boot + Vue的前后端分离项目详细过程(arm64/aarch64架构下)
专题系列往期文章目录 (一)移动端安卓手机改造成linux服务器&Linux中安装软件踩坑历险记 (二)Debian Linux系统中安装oracle JDK1.8详细过程(arm64/aar ...
- spring boot 与 iview 前后端分离架构之开发环境基于docker的部署的实现(三十六)
spring boot 与 iview 前后端分离架构之开发环境基于docker的后端的部署的实现(三十六) 公众号 基于docker的后端的部署 安装mysql数据库 创建数据库 安装redis 安 ...
- Java版知识付费源码 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台
提供职业教育.企业培训.知识付费系统搭建服务.系统功能包含:录播课.直播课.题库.营销.公司组织架构.员工入职培训等. 提供私有化部署,免费售后,专业技术指导,支持PC.APP.H5.小程序多终端同步 ...
- dotnet core webapi +vue 搭建前后端完全分离web架构(一)
架构 服务端采用 dotnet core webapi 前端采用: Vue + router +elementUI+axios 问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问.前后端可 ...
- Spring Boot + Vue + Shiro 实现前后端分离、权限控制
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 来源:http://sina.lt/gauR 本文总结自实习中对项 ...
- Spring Boot + Vue + Shiro 实现前后端分离、权限控制 (附源码)
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] 原项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Free ...
- 保姆级的一个基于spring boot开发的前后端分离商城教程
前言 推荐一个基于spring boot开发前后端分离商城,有完整的代码笔记和视频教程,希望对正在找项目练手的同学有所帮助 本文资料文档领取(在文末) 一.项目背景 5中常见的电商模式 B2B .B2 ...
- Spring and Vue(前后端分离)
一. 创建一个Vue项目(可以使用webpack创建,也可以使用Vue-cli创建),修改src/components/HelloWorld.vue <template><div c ...
- Spring Cloud Gateway +Oauth2 +JWT+Vue 实现前后端分离RBAC权限管理
这是一篇很长的文章,所以需要有点耐心,当然也可以直接查看源码:源码 对于有不太明白的地方可以给我留言,如果网关是zuul或者不是基于spring cloud的实现的,那其实更简单了1.1.如果是zuu ...
最新文章
- 《Adobe Premiere Pro CC经典教程(彩色版)》——2.2 建立项目
- (视频+图文)机器学习入门系列-第9章 集成学习
- 布尔运算_利用布尔运算拆分汉字
- jquery下载地址:https://code.jquery.com/jquery/ 影响范围: 版本低于1.7的jQuery过滤用户输入数据所使用的正则表达式存在缺陷,可能导致LOCA
- Quality of Service 0, 1 2
- C语言程序设计打鱼还是晒网,C语言编程三天打鱼两天晒网
- oracle11g 端口,navicate 连接 oracle11g精简版监听不到端口和用户密码错误问题
- python导入自定义函数_python怎么导入自定义函数
- svg如何平铺 html5,如何在HTML5中使用SVG
- Mybatis安装配置使用
- 51单片机LCD1602显示
- Java 编程语言单词汇总
- 弯管机程序使用三菱FX系列 PLC和昆仑通态触摸屏,也可以用三菱F940系列触摸屏
- IntelliJ IDEA 之汉化包安装
- 笔试面试常见逻辑题及答案
- Delphi 热键 使用WIN作为热键的组合键 给程序增加快捷键
- WebServices(转)
- 简单几步让WinUSB设备变为多端点设备
- IOS 数据库操作SQLite3使用详解
- lol美服服务器修改密码,如何修改LOL美服密码?英雄联盟美服账号密码和邮箱修改教程...