SpringBoot+Vue先後端分離，使用SpringSecurity完美處理權限問題(一)

當先後端分離時，權限問題的處理也和咱們傳統的處理方式有一點差別。筆者前幾天恰好在負責一個項目的權限管理模塊，如今權限管理模塊已經作完了，我想經過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)：

總體效果

首先，不一樣的用戶在登陸成功以後，根據不一樣的角色，會看到不一樣的系統菜單，完整菜單以下：

不一樣用戶登陸上來以後，可能看到的會有差別，以下：

每一個用戶的角色是由系統管理員進行分配的，系統管理員給用戶分配角色的頁面以下：

系統管理員也能夠管理不一樣角色能夠操做的資源，頁面以下：

其餘的刪除、搜索等一些瑣碎的功能我這裏就再也不一一介紹了。

項目地址

因爲整個項目功能比較多，也比較複雜，所以分多期開發，目前權限管理模塊已經開發完成，其餘模塊還在開發當中。考慮到權限管理模塊相對獨立，和其餘模塊的功能並不衝突，同時先後端分離以後的權限管理又是許多小夥伴的痛點，所以將本項目提早開源供小夥伴們研究。可是小夥伴們須要注意的是，這個項目中你沒法看到全部的功能，由於沒有完工。權限管理相關的模塊主要有兩個，分別是 [系統管理->基礎信息設置->權限組] 能夠管理角色和資源的關係， [系統管理->操做員管理] 能夠管理用戶和角色的關係。另外，本項目也在不斷的更新中，小夥伴們能夠經過GitHub上的更新記錄查看最新完成的功能。

項目地址: 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、六步。

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官方教程。

好了，本文咱們就先說這麼多，從下篇文章開始，我會和小夥伴分享這個效果實現的核心思路，歡迎小夥伴們持續關注。

關注公衆號【江南一點雨】，專一於 Spring Boot+微服務以及先後端分離等全棧技術，按期視頻教程分享，關注後回覆 Java ，領取鬆哥爲你精心準備的 Java 乾貨！