SpringBoot+Vue前後端分離，使用SpringSecurity完美處理許可權問題(六)

weixin_34205826發表於2018-01-18
Spring BootVue後端Gse

當前後端分離時，許可權問題的處理也和我們傳統的處理方式有一點差異。筆者前幾天剛好在負責一個專案的許可權管理模組，現在許可權管理模組已經做完了，我想通過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-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，至此，我們的功能基本就都實現了。

關注公眾號，可以及時接收到最新文章:

圖片描述

相關文章