vue樹形許可權選單 前後端分離 前端許可權控制設計

2021-10-14 04:51:24 字數 1368 閱讀 1394

我們比較常見的就是基於角色的訪問控制,使用者通過角色與許可權進行關聯。簡單地說,乙個使用者擁有多個角色,乙個角色擁有多個許可權。這樣,就構造成「使用者-角色-許可權」的授權模型。在這種模型中,使用者與角色之間、角色與許可權之間,通常都是多對多的關係。

通常在業務系統裡面的許可權控制分為選單的訪問(頁面級)、功能模組的操作(功能級)、資料的操作(資料級)、是否可見(資源級)等等。但是有些許可權設計,沒有把檢視作為許可權功能的分類,所有許可權打平,沒有任何分類,那麼這部分工作只能靠我們前端出手了。

在前後分類的場景下,前後端通訊都是通過介面。在後端把當前使用者的使用者名稱,許可權碼等資訊返回給前端之前,前端就需要將許可權碼和檢視許可權的對映關係建立好。為了方便說明,以下示例只將許可權控制分為選單的訪問(頁面級)、資料的操作(資料級)這兩類。

所謂的對映關係就是許可權碼對應的頁面路由和資料操作許可權,如果在乙個 hr 平台, permission_user_view 許可權碼對應當前使用者有員工列表(/user) 和組織架構樹(/user/tree)的頁面路由許可權,並且對員工資料有檢視和樹形有檢視操作許可權,則我們可以用這樣的**來描述:

16}
除了要建立許可權碼和頁面以及資料操作的對映關係,還需要建立頁面和許可權碼的對映關係。

1
當後端返回許可權碼後,前端通過許可權碼和頁面路由的對映關係構建好系統的選單。如果你使用的是 react + react-router 開發系統,你可以通過 react-router 的***去守衛你的頁面路由。如果你的選單是乙個樹形選單,你還需要把平鋪的頁面路由加上父級選單,遞迴出樹形結構。

注意構建選單時需要區分擁有許可權的頁面是否是入口頁面。

1<>2    編輯3    刪除4    詳情5
如果你覺得這樣不夠優雅,也可以嘗試其他方式打標如:注釋打標、屬性打標 ...

拿到使用者資訊後,我們需要將所有的資料操作許可權集中到統一的許可權池,這裡指的是放到同乙個陣列裡面。因為乙個頁面包含的資料操作許可權可能散落在不同的許可權碼裡。

然後用當前頁面的許可權碼和許可權池中許可權碼進行比對,如果許可權池中沒有頁面的某一些許可權,需要對頁面中的這些許可權進行控制。

粗暴一點的辦法就是把這些元素從頁面中刪除或者隱藏,為了使許可權邏輯不過多的干涉頁面功能邏輯,我們可以使用 react 高階元件來實現這一功能:

前後端分離 頁面許可權驗證

前端驗證 登入後 新增登入標識 localstorage.login true inc.js 公共標頭檔案處理,沒有登入 跳轉登入 top.location.href 獲取本地絕對路徑或網域名稱訪問路徑 var href document.location.href var abspath absp...

前後端分離之許可權驗證

前後端分離之許可權驗證 原理 將登入驗證的請求頭中後端生成的秘鑰 token 接收後儲存在cookie內,在再次請求資料時新增在請求頭中傳送給後端驗證,請求資料。登入ajax scope.aaa function aaa 獲取使用者名稱密碼 ajax 將token轉存在cookie中 success...

VUE前後端分離系統部署

前後端分離,除非部署在同台伺服器上,否則都會遇到跨域問題,什麼是跨域問題,我理解的是ip port,只要其中乙個不一致,就會出現跨域問題,解決跨域問題的方式有很多種,我覺得最簡單的解決方案有兩種 1.就是nginx伺服器解決,2.就是直接做網域名稱對映,通過網域名稱呼叫。開發環境不用擔心,vue自己...