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-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，至此，咱們的功能基本就都實現了。

關注公衆號，能夠及時接收到最新文章: