SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(六)
当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开源项目在运行),因此小伙伴们只能将就看一下下面的截图了,GitHub上有部署教程,部署到本地也可以查看完整效果。
项目地址:https://github.com/lenve/vhr
大部分问题我们都已经解决了,本文我们主要来看看用户角色管理和角色资源管理。
本文是本系列的第六篇,建议先阅读前面的文章有助于更好的理解本文:
1.SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(一)
2.SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(二)
3.SpringSecurity中密码加盐与SpringBoot中异常统一处理
4.axios请求封装和异常统一处理
5.权限管理模块中动态加载Vue组件
角色资源关系管理
这个主要是给不同角色分配不同的资源。
角色展示
角色的展示采用了ElementUI中的Collapse 折叠面板,并且采用了手风琴模式,即一次只打开一个角色,如下图:
角色中资源的展示则采用了ElementUI中的树形控件,管理员可以直接直接点击勾选,然后点击修改按钮,进行资源的分配。
核心思路
核心代码如下:
<el-collapse v-model="activeColItem" accordion style="width: 500px;" @change="collapseChange">
<el-collapse-item v-for="(item,index) in roles" :title="item.nameZh" :name="item.id" :key="item.name"><el-card class="box-card"><div slot="header"><span>可访问的资源</span><el-button type="text"style="color: #f6061b;margin: 0px;float: right; padding: 3px 0;width: 15px;height:15px"icon="el-icon-delete" @click="deleteRole(item.id,item.nameZh)"></el-button></div><div><el-tree :props="props":key="item.id":data="treeData":default-checked-keys="checkedKeys"node-key="id"ref="tree"show-checkboxhighlight-current@check-change="handleCheckChange"></el-tree></div><div style="display: flex;justify-content: flex-end;margin-right: 10px"><el-button size="mini" @click="cancelUpdateRoleMenu">取消修改</el-button><el-button type="primary" size="mini" @click="updateRoleMenu(index)">确认修改</el-button></div></el-card>
</el-collapse-item>
</el-collapse>
核心思路如下:
1.通过for循环渲染出el-collapse-item,将角色展示出来。
2.el-collapse-item的内容就是一个树形控件,很明显,树形控件的数量和el-collapse-item的数量是一样多的,但是考虑到el-collapse-item使用了手风琴模式,即一次只有一个折叠面板被打开,因此树形控件的数据源只有一个,即多个树形控件共用一个数据源,为了避免数据紊乱,我采取了这样的数据加载方式:当用户每次点击折叠面板的时候,我都根据当前折叠面板所对应的角色去查询该角色所对应的资源,同时也查询所有的资源,将查到的数据交给树形控件去展示。这样可以避免为每一个树形控件都准备一份数据。
用户角色关系管理
这个就是常规的增删改查。
用户展示
用户的展示使用了ElementUI的 Card卡片 来实现。效果图如下:
角色展示
角色展示使用了ElementUI的 Tag 标签 来实现,角色后面有一个more按钮,点击之后是一个Popover 弹出框,Popover 弹出框的里边是一个Select 选择器,多选的,可以进行角色的分配。
OK,至此,我们的功能基本就都实现了。
关注公众号,可以及时接收到最新文章:
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(六)相关推荐
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(二)
关注公众号[江南一点雨],专注于 Spring Boot+微服务以及前后端分离等全栈技术,定期视频教程分享,关注后回复 Java ,领取松哥为你精心准备的 Java 干货! 当前后端分离时,权限问题的 ...
- 从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建 参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
- 基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目 赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...
- 网上书城 springboot vue前后端分离
网上书城 springboot vue前后端分离 文章目录 网上书城 springboot vue前后端分离 前言 一.运行截图 二.pom文件 1.引入库 总结 前言 基于springboot vu ...
- 大二期末作孽(SpringBoot+Vue前后端分离博客社区(重构White Hole))
文章目录 前言 目录 效果演示 前言 由于时间关系,完成度确实不高,而且不签只是完成了客户端,当然目前这样也是已经可以正常使用了,当然有点勉强.不过后续还是会不断的去更新维护的,不过大体的架构是这样的 ...
- SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 文章目录 SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 前后端分离开发中的异常处理 统一结果封 ...
- SpringBoot+vue前后端分离博客项目
SpringBoot+vue前后端分离博客项目 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 第一步:导入jar包 第二步:然后去写配置文件: 第 ...
- 适合新手拿来练习的springboot+vue前后端分离小Demo
前言: 作者:神的孩子在歌唱 大家好,我叫智 练习springboot+vue前后端分离的Demo 一. 设计数据库 二 . springboot项目创建 2.1 基本配置 2.2 创建dao层 三. ...
- 基于springboot vue前后端分离的图书借阅管理系统源码
请观看视频: 基于springboot vue前后端分离的图书借阅管理系统源码 <project xmlns="http://maven.apache.org/POM/4.0.0&qu ...
最新文章
- TCO 2015 1A Hard.Revmatching(Hall定理)
- 输入防抖 vue # 输入搜索的时候 及时搜索的快速访问接口的 解决方案 vue 中使用防抖和节流
- 3月30日高项作业(采购、信息和配置管理)
- Openwrt配置ssh自动登录服务器socks5转发
- 双向链表操作c语言 函数,c语言 双向链表的基础操作
- 廖雪峰 练习 把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字...
- mysql数据库诊断_RDS MySQL 数据库全量SQL诊断
- python html5交互方式,python+Django(5)—回传至前端几种方式
- 洞察疫情,微软推出新冠数据分析网站 COVID Insights
- python语言程序设计实践教程答案上海交通大学_计算机二级教程 Python语言程序设计 第4章程序的控制结构...
- 个人主页博客网页设计制作HTML5+CSS大作业——清新春暖花开个人博客网站(6页)
- 计算机病毒是指源程序还是特殊小程序,2015年9月计算机一级考试Msoffice上机模拟题(五)...
- c mysql trans_MYSQL STRICT_TRANS_TABLES使用图解教程
- 学习fullpage的使用
- android provision apk 分析
- 百度网盘下载显示系统限制,无法下载解决
- 猪:原来大数据都是骗“猪”的
- gensim : AttributeError: The vocab attribute was removed from KeyedVector in Gensim 4.0.0.
- J2EE平台WEB组件开发中如何使用定制标签
- 生物技术的计算机应用系统,生物技术在计算机发展中的作用.pdf