原文鏈接:https://segmentfault.com/a/1190000012879279
當前后端分離時，權限問題的處理也和我們傳統的處理方式有一點差異。筆者前幾天剛好在負責一個項目的權限管理模塊，現在權限管理模塊已經做完了，我想通過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，至此，我們的功能基本就都實現了