當前后端分離時，權限問題的處理也和我們傳統的處理方式有一點差異。
筆者前幾天剛好在負責一個項目的權限管理模塊，現在權限管理模塊已經做完了，我想通過5-6篇文章，來介紹一下項目中遇到的問題以及我的解決方案，希望這個系列能夠給小伙伴一些幫助。
本系列文章並不是手把手的教程，主要介紹了核心思路並講解了核心代碼，完整的代碼小伙伴們可以在GitHub上star並clone下來研究。
另外，原本計划把項目跑起來放到網上供小伙伴們查看，但是之前買服務器為了省錢，內存只有512M，兩個應用跑不起來(已經有一個V部落開源項目在運行)，因此小伙伴們只能將就看一下下面的截圖了，文末有部署教程，部署到本地也可以查看完整效果。
本文我們先不聊具體實現，我先來介紹一下我這個權限管理模塊的一個整體架構，以及最終呈現出來的效果。
數據庫設計
權限數據庫主要包含了五張表，分別是資源表、角色表、用戶表、資源角色表、用戶角色表，數據庫關系模型如下：
關於這個表，我說如下幾點：
1.hr表是用戶表，存放了用戶的基本信息。
2.role是角色表，name字段表示角色的英文名稱，按照SpringSecurity的規范，將以ROLE_開始，nameZh字段表示角色的中文名稱。
3.menu表是一個資源表，該表涉及到的字段有點多，由於我的前端采用了Vue來做，因此當用戶登錄成功之后，系統將根據用戶的角色動態加載需要的模塊，所有模塊的信息將保存在menu表中，menu表中的path、component、iconCls、keepAlive、requireAuth等字段都是Vue-Router中需要的字段，也就是說menu中的數據到時候會以json的形式返回給前端，再由vue動態更新router，menu中還有一個字段url，表示一個url pattern，即路徑匹配規則，假設有一個路徑匹配規則為/admin/**,那么當用戶在客戶端發起一個/admin/user的請求，將被/admin/**攔截到，系統再去查看這個規則對應的角色是哪些，然后再去查看該用戶是否具備相應的角色，進而判斷該請求是否合法。
下圖分別是用戶表、角色表以及資源表中的部分數據(數據庫腳本可以在文末的項目地址中下載，位置resources/vhr.sql)：
整體效果
首先，不同的用戶在登錄成功之后，根據不同的角色，會看到不同的系統菜單，完整菜單如下：
不同用戶登錄上來之后，可能看到的會有差異，如下：
每個用戶的角色是由系統管理員進行分配的，系統管理員給用戶分配角色的頁面如下：
系統管理員也可以管理不同角色可以操作的資源，頁面如下：
其他的刪除、搜索等一些瑣碎的功能我這里就不再一一介紹了。
項目地址
由於商業協議，原本的項目不能共享給各位小伙伴，因此我專門做了一個開源項目，這個項目的功能整體來說比較多，但是考慮到這個系列的文章主要是向大家介紹權限管理模塊，因此其他模塊都被我暫時閹割掉了，不過小伙伴們可以放心，權限管理模塊的代碼一行都沒有刪除，涉及到權限管理的代碼和數據都是完整的，可以直接運行的。小伙伴將以管理員的身份登錄到后台系統，登錄成功之后，依次點擊系統管理->基礎信息設置->權限組，即可配置不同角色可以操作的資源；然后依次點擊系統管理->操作員管理，即可管理每一位操作員的角色。
項目地址: https://github.com/lenve/vhr
快速部署
1.clone項目到本地git@github.com:lenve/vhr.git
2.數據庫腳本放在hrserver項目的resources目錄下，在MySQL中執行數據庫腳本
3.數據庫配置在hrserver項目的resources目錄下的application.properties文件中
4.在IntelliJ IDEA中運行hrserver項目
OK，至此，服務端就啟動成功了，此時我們直接在地址欄輸入http://localhost:8082/index.html即可訪問我們的項目，如果要做二次開發，請繼續看第五、六步。
5.進入到vuehr目錄中，在命令行依次輸入如下命令：
# 安裝依賴 npm install # 在 localhost:8080 啟動項目 npm run dev
由於我在vuehr項目中已經配置了端口轉發，將數據轉發到SpringBoot上，因此項目啟動之后，在瀏覽器中輸入http://localhost:8080就可以訪問我們的前端項目了，所有的請求通過端口轉發將數據傳到SpringBoot中（注意此時不要關閉SpringBoot項目）。
6.最后可以用WebStorm等工具打開vuehr項目，繼續開發，開發完成后，當項目要上線時，依然進入到vuehr目錄，然后執行如下命令：
npm run build
該命令執行成功之后，vuehr目錄下生成一個dist文件夾，將該文件夾中的兩個文件static和index.html拷貝到SpringBoot項目中resources/static/目錄下，然后就可以像第4步那樣直接訪問了。
步驟5中需要大家對NodeJS、NPM等有一定的使用經驗，不熟悉的小伙伴可以先自行搜索學習下，推薦Vue官方教程。
注意事項
再次強調，這只是一個權限管理功能模塊，運行后只有權限管理功能是完整的。小伙伴們在本地部署成功之后，可以修改每一個用戶的角色以及每一個角色可以操作的資源，修改成功之后，注銷登錄，再以被修改的用戶身份登錄，即可看到菜單變化。
好了，本文我們就先說這么多，從下篇文章開始，我會和小伙伴分享這個效果實現的核心思路，歡迎小伙伴們持續關注。
關注公眾號，可以及時接收到最新文章:
https://blog.csdn.net/u012702547/article/details/79010010