?源代碼在GitHub - 629y/course: Spring Cloud + Vue前后端分離-在線課程

Spring Cloud + Vue前后端分離-第12章 通用權(quán)限設(shè)計(jì)

這一章我們不依賴第三方框架，我會(huì)從權(quán)限相關(guān)表的設(shè)計(jì)，到權(quán)限的配置，到權(quán)限的攔截，帶大家一步一步的做出一個(gè)通用的權(quán)限設(shè)計(jì)方案。

12-1 通用權(quán)限解決方案介紹

權(quán)限攔截的對(duì)象：用戶

權(quán)限攔截的點(diǎn)：菜單、路由、接口、按鈕

控制用戶對(duì)資源的訪問

權(quán)限的操作：配置、讀取、攔截

100用戶 * 100資源

直接用用戶和資源做關(guān)聯(lián)來控制權(quán)限，適合小型的項(xiàng)目，簡單，快速

三個(gè)核心概念：用戶、角色、資源

100用戶 * 2個(gè)角色 + 2個(gè)角色 * 100資源

經(jīng)典的權(quán)限管理設(shè)計(jì)：用戶和角色關(guān)聯(lián)，角色和資源關(guān)聯(lián)

功能點(diǎn)：

配置：

????????用戶管理：用戶表，用戶管理界面，已完成

????????資源配置：資源表，資源配置界面

????????角色管理：角色表，角色管理界面

????????用戶角色關(guān)聯(lián)配置：用戶角色關(guān)聯(lián)表，復(fù)用角色管理界面

????????角色資源關(guān)聯(lián)配置：角色資源關(guān)聯(lián)表，復(fù)用角色管理界面

兩張關(guān)聯(lián)表的配置，可以單獨(dú)設(shè)計(jì)界面，也可以直接做到角色管理界面里。

讀取：

? ? ? ? 用戶權(quán)限的讀?。河脩舻卿浀臅r(shí)候，讀取該用戶的所有權(quán)限。

登錄時(shí)，通過用戶角色關(guān)聯(lián)表，可以知道當(dāng)前登錄用戶的角色，再通過角色資源關(guān)聯(lián)表就可以查到當(dāng)前用戶所有的資源

攔截：

? ? ? ? 用戶操作業(yè)務(wù)時(shí)，進(jìn)行權(quán)限攔截

? ? ? ? ? ? ? ? 前端界面：菜單，路由，按鈕，hidden disabled

? ? ? ? ? ? ? ? 后端接口：接口，gateway的過濾器

疑問：前端已經(jīng)對(duì)菜單和按鈕做攔截，用戶不能操作了，為什么還要對(duì)接口做攔截？

重要提示：所有前端的設(shè)計(jì)都是不安全的。

例登錄名被修改了，說明我們的接口沒有做登錄名不可修改的校驗(yàn)，因?yàn)槲覀冋J(rèn)為給登錄名加了disabled就可以了，這是一個(gè)常見的安全隱患。

權(quán)限初始化

系統(tǒng)上線時(shí)，要初始化這五張表的數(shù)據(jù)。初始有一個(gè)用戶能登錄，能管理角色，管理資源，分配權(quán)限。

前面的章節(jié)的講解模式是從簡單的功能入手，再不斷的擴(kuò)展和完善，這一章，我們換一種模式，就會(huì)先分析需求，再列出功能點(diǎn)，明確總體要做哪些功能，再開始開發(fā)。

在實(shí)際工作中，也是用這種模式，我們還會(huì)加入團(tuán)隊(duì)評(píng)審的環(huán)節(jié)，確保我們的功能不會(huì)做歪了。

中高級(jí)面試題：請(qǐng)簡單的設(shè)計(jì)一個(gè)權(quán)限管理功能，對(duì)初級(jí)人員來說會(huì)有點(diǎn)難，不過學(xué)完這一章，就不是問題了。

12-2 資源配置管理

資源表的設(shè)計(jì)與基本代碼生成

1.通用權(quán)限管理：資源表的設(shè)計(jì)與基本代碼生成

資源的名稱一般是用頁面上看得見的元素：菜單、按鈕等。

all.sql

如果一個(gè)頁面的所有操作統(tǒng)一控制權(quán)限，request可以填相關(guān)接口的前綴

生成代碼

ResourceService.java報(bào)錯(cuò)原因：資源表的實(shí)體類是Resource和@Resource注解同名，導(dǎo)致沖突?

admin.vue

router.js

測(cè)試

資源樹的保存

1.通用權(quán)限管理：資源樹的保存

資源點(diǎn)是開發(fā)階段就確定的，所以并不是上線后再一個(gè)一個(gè)配置的。

資源管理最簡單的一種方案：上線前準(zhǔn)備好sql，刷庫。

將資源管理做成資源樹進(jìn)行管理。

填入數(shù)據(jù)：帶有層級(jí)結(jié)構(gòu)的json字符串

resource.json

用法：以后開發(fā)新功能的時(shí)候，就在該文件里加入新的資源，可以上線前將新的資源json通過控臺(tái)保存進(jìn)數(shù)據(jù)庫。

resource.vue

ResourceDto.java

ResourceService.java

將節(jié)點(diǎn)一個(gè)一個(gè)的取出來，放入list中?

ResourceController.java

測(cè)試

資源樹的顯示

1.通用權(quán)限管理：資源樹的顯示

resource.vue

ResourceController.java

ResourceService.java

資源的保存是將樹結(jié)構(gòu)轉(zhuǎn)成列表，重點(diǎn)是children屬性；資源的顯示是將列表轉(zhuǎn)成樹結(jié)構(gòu)，重點(diǎn)是parent屬性。

小知識(shí)：一邊循環(huán)list，一邊刪除list中的對(duì)象，可以使用倒序循環(huán)。

list中有父節(jié)點(diǎn)的對(duì)象都會(huì)被remove掉，最終留下來的就是頂級(jí)的節(jié)點(diǎn)。

測(cè)試

12-3 角色權(quán)限管理

基本的角色管理功能

1.通用權(quán)限管理：增加基本的角色管理功能

2.資源列表補(bǔ)全

all.sql

admin.vue

router.js

resource.json

[{
  "id" : "01","name": "系統(tǒng)管理",
  "children": [{
    "id" : "0101","name": "用戶管理","page": "/system/user",
    "children": [
      {"id": "010101","name": "保存","request": ["/system/admin/user/list","/system/admin/user/save"]},
      {"id": "010102","name": "刪除","request": ["/system/admin/user/delete"]},
      {"id": "010103","name": "重置密碼","request": ["/system/admin/user/save-password"]}
    ]
  },
    {
      "id" : "0102","name": "資源管理","page": "/system/resource",
      "children": [
        {"id": "010201","name": "保存/顯示","request": ["/system/admin/resource"]}
      ]
    },{
      "id" : "0103","name": "角色管理","page": "/system/role",
      "children": [
        {"id": "010301","name": "角色/權(quán)限管理","request": ["/system/admin/role"]}
      ]
    }]
},
  {
    "id" : "02","name": "業(yè)務(wù)管理",
    "children": [{
      "id" : "0201","name": "分類管理","page": "business/category",
      "children": [
        {"id": "020101","name": "增刪改查","request": ["/business/admin/category"]}
      ]
    },
      {
        "id" : "0202","name": "課程管理","page": "business/course",
        "children": [
          {"id": "020201","name": "增刪改查","request": ["/business/admin/course",
            "/business/admin/category/all,/business/admin/teacher/list","/file/f/course","/business/chapter"]}
        ]
      },{
        "id" : "0203","name": "講師管理","page": "business/teacher",
        "children": [
          {"id": "020301","name": "增刪改查","request": ["/business/admin/teacher"]}
        ]
      }, {
        "id" : "0204","name": "大章管理","page": "business/chapter",
        "children": [
          {"id": "020401","name": "增刪改查","request": ["/business/admin/course","/business/admin/chapter"]}
        ]
      },
      {
        "id" : "0205","name": "小節(jié)管理","page": "business/section",
        "children": [
          {"id": "020501","name": "增刪改查","request": ["/business/admin/section","/business/admin/chapter"]}
        ]
      }
    ]
  },
  {
    "id" : "03","name": "文件管理",
    "children": [{
      "id" : "0301","name": "文件管理","page": "file/file",
      "children": [
        {"id": "030101","name": "文件管理","request": ["/file/admin/file","/file/admin"]}
      ]
    }]
  }
]

測(cè)試

增加角色資源關(guān)聯(lián)功能

1.通用權(quán)限管理：增加角色資源關(guān)聯(lián)功能表，生成持久層和服務(wù)端代碼

all.sql

點(diǎn)擊[關(guān)聯(lián)資源]按鈕時(shí)，加載資源樹

1.通用權(quán)限管理：點(diǎn)擊[關(guān)聯(lián)資源]按鈕時(shí)，加載資源樹

role.vue

測(cè)試

點(diǎn)擊資源樹模態(tài)框【保存】按鈕時(shí)，保存角色資源關(guān)聯(lián)表

1.通用權(quán)限管理：點(diǎn)擊資源樹模態(tài)框【保存】按鈕時(shí)，保存角色資源關(guān)聯(lián)表

role.vue

RoleDto.java

RoleService.java

RoleController.java

測(cè)試

打開資源樹模態(tài)框時(shí)，加載角色資源關(guān)聯(lián)數(shù)據(jù)，并自動(dòng)勾選樹節(jié)點(diǎn)

1.通用權(quán)限管理：打開資源樹模態(tài)框時(shí)，加載角色資源關(guān)聯(lián)數(shù)據(jù)，并自動(dòng)勾選樹節(jié)點(diǎn)

role.vue

批量操作的思路：先將原有的刪除，再批量新增

RoleService.java

RoleController.java

?測(cè)試

增加角色用戶關(guān)聯(lián)功能

1.通用權(quán)限管理：增加角色用戶關(guān)聯(lián)表，生成持久層和服務(wù)端代碼

all.sql

點(diǎn)擊【關(guān)聯(lián)用戶】按鈕時(shí)，加載所有用戶，彈出角色用戶關(guān)聯(lián)模態(tài)框

1.通用權(quán)限管理：點(diǎn)擊【關(guān)聯(lián)用戶】按鈕時(shí)，加載所有用戶，彈出角色用戶關(guān)聯(lián)模態(tài)框

role.vue

測(cè)試

點(diǎn)擊用戶模態(tài)框【保存】按鈕時(shí)，保存角色用戶關(guān)聯(lián)表

1.通用權(quán)限管理：點(diǎn)擊用戶模態(tài)框【保存】按鈕時(shí)，保存角色用戶關(guān)聯(lián)表

role.vue

依賴vue的雙向數(shù)據(jù)綁定特性，可以將復(fù)雜的頁面操作變成簡單的數(shù)據(jù)操作。很多前端框架都有雙向數(shù)據(jù)綁定的特性，比如angular,微信小程序等。

RoleDto.java

RoleService.java

RoleController.java

測(cè)試

打開用戶模態(tài)框時(shí)，加載角色用戶關(guān)聯(lián)數(shù)據(jù)

1.通用權(quán)限管理：打開用戶模態(tài)框時(shí)，加載角色用戶關(guān)聯(lián)數(shù)據(jù)

role.vue

?查關(guān)聯(lián)表，得到的時(shí)userId，但是顯示需要的是loginName。這里也可以通過寫自定義mapper，把user表和role_user表關(guān)聯(lián)得到loginName

RoleService.java

RoleController.java

測(cè)試

12-4 登錄時(shí)獲取資源權(quán)限

讀取當(dāng)前登錄用戶所屬的角色的所有資源

1.通用權(quán)限管理：登錄時(shí)，讀取當(dāng)前登錄用戶所屬的角色的所有資源

LoginUserDto.java

一個(gè)資源可以會(huì)用到多個(gè)接口，多個(gè)資源的接口就可能重復(fù)，所以這里用Set去重

MyUserMapper.xml

MyUserMapper.java

UserService.java

?測(cè)試

00000000

00000001?

00000002

?關(guān)于User的權(quán)限設(shè)置比較細(xì)，每個(gè)請(qǐng)求接口都可以單獨(dú)控制。關(guān)于Resource的權(quán)限設(shè)置比較粗，所有接口用同一個(gè)request控制

12-5 權(quán)限攔截功能開發(fā)

前端界面權(quán)限攔截

前端界面權(quán)限攔截，完成用戶管理

1.通用權(quán)限管理：前端界面權(quán)限攔截，完成用戶管理

tool.js

admin.vue

在html中要使用vue方法，這個(gè)方法得在methods中定義

user.vue

測(cè)試

目前只修改了用戶管理的權(quán)限攔截，以用戶管理為例

00000000

每次修改權(quán)限配置，需要重新登錄后才生效

前端界面權(quán)限攔截，完成所有界面控制

1.通用權(quán)限管理：前端界面權(quán)限攔截，完成所有界面控制

admin.vue

如果一個(gè)頁面的所有按鈕是統(tǒng)一控制的，那么只需要控制菜單就可以了，不需要給每個(gè)按鈕加權(quán)限控制代碼。

測(cè)試

路由權(quán)限判斷

1.通用權(quán)限管理：前端界面權(quán)限攔截，增加路由權(quán)限判斷

沒有資源管理，但是我們可以直接通過路由進(jìn)入

resource.json

[{
  "id" : "00","name": "歡迎","page": "welcome"
},{
  "id" : "01","name": "系統(tǒng)管理",
  "children": [{
    "id" : "0101","name": "用戶管理","page": "system/user",
    "children": [
      {"id": "010101","name": "保存","request": ["/system/admin/user/list","/system/admin/user/save"]},
      {"id": "010102","name": "刪除","request": ["/system/admin/user/delete"]},
      {"id": "010103","name": "重置密碼","request": ["/system/admin/user/save-password"]}
    ]
  },
    {
      "id" : "0102","name": "資源管理","page": "system/resource",
      "children": [
        {"id": "010201","name": "保存/顯示","request": ["/system/admin/resource"]}
      ]
    },{
      "id" : "0103","name": "角色管理","page": "system/role",
      "children": [
        {"id": "010301","name": "角色/權(quán)限管理","request": ["system/admin/role"]}
      ]
    }]
},
  {
    "id" : "02","name": "業(yè)務(wù)管理",
    "children": [{
      "id" : "0201","name": "分類管理","page": "business/category",
      "children": [
        {"id": "020101","name": "增刪改查","request": ["/business/admin/category"]}
      ]
    },
      {
        "id" : "0202","name": "課程管理","page": "business/course",
        "children": [
          {"id": "020201","name": "增刪改查","request": ["/business/admin/course",
            "/business/admin/category/all,/business/admin/teacher/list","/file/f/course","/business/chapter"]}
        ]
      },{
        "id" : "0203","name": "講師管理","page": "business/teacher",
        "children": [
          {"id": "020301","name": "增刪改查","request": ["/business/admin/teacher"]}
        ]
      }, {
        "id" : "0204","name": "大章管理","page": "business/chapter",
        "children": [
          {"id": "020401","name": "增刪改查","request": ["/business/admin/course","/business/admin/chapter"]}
        ]
      },
      {
        "id" : "0205","name": "小節(jié)管理","page": "business/section",
        "children": [
          {"id": "020501","name": "增刪改查","request": ["/business/admin/section","/business/admin/chapter"]}
        ]
      }
    ]
  },
  {
    "id" : "03","name": "文件管理",
    "children": [{
      "id" : "0301","name": "文件管理","page": "file/file",
      "children": [
        {"id": "030101","name": "文件管理","request": ["/file/admin/file","/file/admin"]}
      ]
    }]
  }
]

?admin.vue

第一次加載admin.vue時(shí)，需要判斷路由權(quán)限，比如從登錄頁跳到控臺(tái)主頁，或者刷新控臺(tái)主頁時(shí)，會(huì)執(zhí)行mounted.

進(jìn)入控臺(tái)主頁后，發(fā)生子路由跳轉(zhuǎn)時(shí)，會(huì)觸發(fā)watch。

測(cè)試

后端接口權(quán)限判斷

1.通用權(quán)限管理：增加后端接口權(quán)限攔截

在做登錄功能時(shí)，我們也對(duì)接口做了登錄校驗(yàn)，否則容易被繞開登錄，直接調(diào)用后端接口。這里同樣需要對(duì)接口做權(quán)限攔截

重新登錄?

可以通過搜索hidden,display:none等，來查看頁面是否有隱藏元素

ctrl+f

?可以刪除成功，這是非常危險(xiǎn)的

?LoginAdminGatewayFilter.java

gateway里沒有飲用server模塊，所以沒用LoginUserDto類。這里轉(zhuǎn)成JSONObject進(jìn)行操作

比如資源的保存：

path=system/admin/resource/save,

而配置的

request=system/admin/resource,

那么path.contain(request)就是true

測(cè)試

可以在vue的攔截器中，針對(duì)401返回碼做判斷，如果是401，就跳到登錄頁面

將業(yè)務(wù)場(chǎng)景變成程序代碼

需求分析：最終要做成什么樣子，如何使用這個(gè)功能。

功能點(diǎn)拆分：要實(shí)現(xiàn)這個(gè)需求，都有哪些功能點(diǎn)。

代碼編寫

團(tuán)隊(duì)內(nèi)部評(píng)審?fù)ㄟ^后，為每個(gè)功能點(diǎn)評(píng)優(yōu)先級(jí)，并估工時(shí)。

每天早上開展例會(huì)，每個(gè)人花幾分鐘的時(shí)間回答3個(gè)問題：

1.昨天做了哪些內(nèi)容；

2.有沒有遇到什么問題；

3.今天準(zhǔn)備做哪些內(nèi)容。

有問題一定要反饋出來，可以是遇到新技術(shù)了，或是功能點(diǎn)比想象中復(fù)雜，工時(shí)估少了等等。文章來源地址http://www.zghlxwxcb.cn/news/detail-792232.html

到了這里，關(guān)于Spring Cloud + Vue前后端分離-第12章 通用權(quán)限設(shè)計(jì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！