SpringBoot+Vue前后端分離后如何使用SpringSecurity處理權(quán)限問(wèn)題

這篇文章給大家分享的是有關(guān)SpringBoot+Vue前后端分離后如何使用SpringSecurity處理權(quán)限問(wèn)題的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

數(shù)據(jù)庫(kù)設(shè)計(jì)

權(quán)限數(shù)據(jù)庫(kù)主要包含了五張表，分別是資源表、角色表、用戶表、資源角色表、用戶角色表，數(shù)據(jù)庫(kù)關(guān)系模型如下：

關(guān)于這個(gè)表，我說(shuō)如下幾點(diǎn)：

1.hr表是用戶表，存放了用戶的基本信息。

2.role是角色表，name字段表示角色的英文名稱，按照SpringSecurity的規(guī)范，將以 ROLE_ 開(kāi)始，nameZh字段表示角色的中文名稱。

3.menu表是一個(gè)資源表，該表涉及到的字段有點(diǎn)多，由于我的前端采用了Vue來(lái)做，因此當(dāng)用戶登錄成功之后，系統(tǒng)將根據(jù)用戶的角色動(dòng)態(tài)加載需要的模塊，所有模塊的信息將保存在menu表中，menu表中的path、component、iconCls、keepAlive、requireAuth等字段都是Vue-Router中需要的字段，也就是說(shuō)menu中的數(shù)據(jù)到時(shí)候會(huì)以json的形式返回給前端，再由vue動(dòng)態(tài)更新router，menu中還有一個(gè)字段url，表示一個(gè)url pattern，即路徑匹配規(guī)則，假設(shè)有一個(gè)路徑匹配規(guī)則為 /admin/** ,那么當(dāng)用戶在客戶端發(fā)起一個(gè) /admin/user 的請(qǐng)求，將被 /admin/** 攔截到，系統(tǒng)再去查看這個(gè)規(guī)則對(duì)應(yīng)的角色是哪些，然后再去查看該用戶是否具備相應(yīng)的角色，進(jìn)而判斷該請(qǐng)求是否合法。

下圖分別是用戶表、角色表以及資源表中的部分?jǐn)?shù)據(jù)(數(shù)據(jù)庫(kù)腳本可以在文末的項(xiàng)目地址中下載，位置 resources/vhr.sql )：

整體效果

首先，不同的用戶在登錄成功之后，根據(jù)不同的角色，會(huì)看到不同的系統(tǒng)菜單，完整菜單如下：

不同用戶登錄上來(lái)之后，可能看到的會(huì)有差異，如下：

每個(gè)用戶的角色是由系統(tǒng)管理員進(jìn)行分配的，系統(tǒng)管理員給用戶分配角色的頁(yè)面如下：

系統(tǒng)管理員也可以管理不同角色可以操作的資源，頁(yè)面如下：

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

項(xiàng)目地址

由于商業(yè)協(xié)議，原本的項(xiàng)目不能共享給各位小伙伴，因此我專門做了一個(gè)開(kāi)源項(xiàng)目，這個(gè)項(xiàng)目的功能整體來(lái)說(shuō)比較多，但是考慮到這個(gè)系列的文章主要是向大家介紹權(quán)限管理模塊，因此其他模塊都被我暫時(shí)閹割掉了，不過(guò)小伙伴們可以放心，權(quán)限管理模塊的代碼一行都沒(méi)有刪除，涉及到權(quán)限管理的代碼和數(shù)據(jù)都是完整的，可以直接運(yùn)行的。小伙伴將以管理員的身份登錄到后臺(tái)系統(tǒng)，登錄成功之后，依次點(diǎn)擊 系統(tǒng)管理->基礎(chǔ)信息設(shè)置->權(quán)限組 ，即可配置不同角色可以操作的資源；然后依次點(diǎn)擊 系統(tǒng)管理->操作員管理 ，即可管理每一位操作員的角色。

項(xiàng)目地址: https://github.com/lenve/vhr

快速部署

1.clone項(xiàng)目到本地 git@github.com:lenve/vhr.git

2.數(shù)據(jù)庫(kù)腳本放在hrserver項(xiàng)目的resources目錄下，在MySQL中執(zhí)行數(shù)據(jù)庫(kù)腳本

3.數(shù)據(jù)庫(kù)配置在hrserver項(xiàng)目的resources目錄下的application.properties文件中

4.在IntelliJ IDEA中運(yùn)行hrserver項(xiàng)目

OK，至此，服務(wù)端就啟動(dòng)成功了，此時(shí)我們直接在地址欄輸入 http://localhost:8082/index.html 即可訪問(wèn)我們的項(xiàng)目，如果要做二次開(kāi)發(fā)，請(qǐng)繼續(xù)看第五、六步。

5.進(jìn)入到vuehr目錄中，在命令行依次輸入如下命令：

# 安裝依賴
npm install
# 在 localhost:8080 啟動(dòng)項(xiàng)目
npm run dev

由于我在vuehr項(xiàng)目中已經(jīng)配置了端口轉(zhuǎn)發(fā)，將數(shù)據(jù)轉(zhuǎn)發(fā)到SpringBoot上，因此項(xiàng)目啟動(dòng)之后，在瀏覽器中輸入 http://localhost:8080 就可以訪問(wèn)我們的前端項(xiàng)目了，所有的請(qǐng)求通過(guò)端口轉(zhuǎn)發(fā)將數(shù)據(jù)傳到SpringBoot中（注意此時(shí)不要關(guān)閉SpringBoot項(xiàng)目）。

6.最后可以用WebStorm等工具打開(kāi)vuehr項(xiàng)目，繼續(xù)開(kāi)發(fā)，開(kāi)發(fā)完成后，當(dāng)項(xiàng)目要上線時(shí)，依然進(jìn)入到vuehr目錄，然后執(zhí)行如下命令：

npm run build

該命令執(zhí)行成功之后，vuehr目錄下生成一個(gè)dist文件夾，將該文件夾中的兩個(gè)文件static和index.html拷貝到SpringBoot項(xiàng)目中resources/static/目錄下，然后就可以像第4步那樣直接訪問(wèn)了。

步驟5中需要大家對(duì)NodeJS、NPM等有一定的使用經(jīng)驗(yàn)，不熟悉的小伙伴可以先自行搜索學(xué)習(xí)下，推薦 Vue官方教程 。

注意事項(xiàng)

再次強(qiáng)調(diào)，這只是一個(gè)權(quán)限管理功能模塊，運(yùn)行后只有權(quán)限管理功能是完整的。小伙伴們?cè)诒镜夭渴鸪晒χ?，可以修改每一個(gè)用戶的角色以及每一個(gè)角色可以操作的資源，修改成功之后，注銷登錄，再以被修改的用戶身份登錄，即可看到菜單變化。

感謝各位的閱讀！關(guān)于“SpringBoot+Vue前后端分離后如何使用SpringSecurity處理權(quán)限問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！