专栏首页玩转JavaEESpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(六)

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

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


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

大部分问题我们都已经解决了,本文我们主要来看看用户角色管理和角色资源管理。

角色资源关系管理

这个主要是给不同角色分配不同的资源。

角色展示

角色的展示采用了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-checkbox
                highlight-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,至此,我们的功能基本就都实现了。

本文分享自微信公众号 - 玩转JavaEE(gh_d1ca11234a30),作者:悟空

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 学 Maven,看松哥这一篇就够了

    由于 Java 的生态非常丰富,无论你想实现什么功能,都能找到对应的工具类,这些工具类都是以 jar 包的形式出现的,例如 Spring,SpringMVC、M...

    江南一点雨
  • 深入理解 SecurityConfigurer 【源码篇】

    SecurityConfigurer 在 Spring Security 中是一个非常重要的角色。在前面的文章中,松哥曾经多次提到过,Spring Securi...

    江南一点雨
  • Spring Boot2 系列教程(十六)定时任务的两种实现方式

    在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled...

    江南一点雨
  • ElementUI Form 表单

    Form 表单由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据

    py3study
  • 【Vue.js】Vue.js组件库Element中的下拉菜单、步骤条、对话框和文字提示

    Dropdown 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的尺寸。

    魏晓蕾
  • vuejs之springboot+vue+element-ui之添加信息

    点击导航一的页面二显示添加表单,表单可以去element官网上找一个,比如带验证的表单,此时PageTwo.vue

    绝命生
  • 24个解决实际问题的ES6代码段

    这篇文章基于实际使用场景总结了 24 个 ES6 代码段,可用来解决项目中可能遇到的一系列问题。

    王小婷
  • 总结了工作中常用的 ES6 代码片段,整理后的 24 个值得拥有

    https://juejin.cn/post/6906398702269628424

    winty
  • 看得见的数据结构Android版之单链表篇

    张风捷特烈
  • Vue + Element UI 实现权限管理系统 前端篇(十四):菜单功能实现

    朝雨忆轻尘

扫码关注云+社区

领取腾讯云代金券