雲栖号資訊：【 點選檢視更多行業資訊】
在這裡您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！
近幾年随着react、angular、vue等前端架構興起，前後端分離的架構迅速流行。但同時權限控制也帶來了問題。
網上很多前、後端分離權限僅僅都僅僅在描述前端權限控制、且是較簡單、固定的角色場景，滿足不了我們使用者、角色都是動态的場景。
且僅僅前端進行權限控制并不是真正意義的權限控制，它隻是減少頁面結構暴露、增強使用者體驗的功效。
場景
系統為背景管理系統，包含了使用者建立、使用者登入、使用者管理自己的資源。使用者經常會新增、删除，也可以根據工作情況随時調整頁面、功能權限，是以采用使用者-角色-頁面權限方案實作。
為什麼不行：
1.根據前端路由表顯示左側菜單，但vue-router的路由表主要為了組織代碼，經常我們所需要的菜單并非一緻。比如某個前端路由a子路由有b、c，但菜單中我們想要直接一級菜單就顯示b、c或者将b、c各放到其他菜單下。是以這種非常不靈活。
2.一個路由是菜單還是頁面？是否需要顯示到菜單中？是否驗證權限？哪個角色或者使用者擁有權限？這些都需要寫到前端路由裡面，一旦有任何權限變動就要大量調整代碼。
3.如果權限寫死在前端，那麼角色或者使用者必須已知且固定不變。比如頁面1的meta增加屬性辨別可通路的角色為a和b
頁面
一個頁面即一個前端頁面，比如首頁、使用者管理頁、資源管理頁等。
基本思路為：前端路由保持不變，資料庫存儲菜單結構、頁面權限控制（可以直接做成一個頁面來友善管理）等，前端根據資料庫中的菜單結構和權限資訊來渲染一個菜單出來并隻顯示其有權限的菜單，并在路由守衛中進行權限控制防止手動輸入path越權打開頁面。
1.前端路由（vue-router）中需要正常建立頁面及路由。
2.資料庫存儲菜單結構和頁面權限資訊，
(1).菜單（目錄、非内容頁）可以自己建立，不必要求前端路由中有，因為這是指菜單的可視化的組織結構
(2).頁面（内容頁）必須是前端路由中已有頁面，因為這是使用者需要通路的内容。
(3).菜單和頁面組成上下級關系，一級可以是菜單也可以是内容頁，内容頁也可以放在菜單下，這樣理論（需要頁面菜單樣式支援）可以組成無限級菜單
(4).菜單和頁面的基本屬性包括title（對應路由title）、name（對應路由name）、path（對應路由path）、父級、類型（菜單/頁面）、是否可見（左側菜單欄是否顯示：部分頁面可能是頁面内的連結進去）、是否需要驗證權限（部分頁面比如首頁無需驗證權限大家都可以進入）
(5).不需要控制權限且不需要顯示到左側菜單的路由這裡可以不進行管理，比如404頁面等
3.前台打開後擷取擷取資料庫的所有菜單、頁面及結構，根據是否登入、是否需要驗證權限等進行控制，或無權限跳轉至登入頁
4.使用者登入成功後，再擷取使用者對應的的頁面權限清單，使用上一步獲得的所有頁面、結構和使用者擁有權限的清單渲染出一個菜單，隻包含此使用者擁有權限的，提升使用者體檢，避免顯示大量使用者不能通路的菜單影響使用和不必要的功能暴露。
5.路由守衛中根據上一步獲得的權限清單判斷每個跳轉，無權限可傳回404或無權限頁面，防止使用者手動輸入path越權通路
頁面管理：
功能
部分功能有事需要單獨控制權限，比如使用者管理頁面可能允許多個角色檢視，但是其中的“建立使用者”功能隻允許某一個角色使用，那麼僅僅使用頁面權限是不夠。是以需要細粒度的功能權限控制。
網上的方案都是說：根據資源控制增、删、改、查等等，比如針對使用者就是使用者的建立、修改、删除、查詢等。但是在我的實際使用中發現并不切合實際，最起碼對像我這種管理背景，資源并不單純的增删改查，可能有其他地方的其他操作中也會對此使用者資源造成影響，比如禁用、删除角色也要禁用、删除使用者，那麼這個權限到底屬于角色的權限還是屬于使用者的權限，或者背景又改了，角色又影響了其他資源或者不再對使用者進行操作，都會影響權限控制。
是以更合理的方法應該為将每個功能單獨進行控制并和頁面進行關聯，且不限定必須是增、删、改、查四種，可以任意定制，隻需要與前後端開發約定一個唯一的辨別即可。
如上的例子中，使用者管理頁面下有使用者各種功能，角色管理頁面中也有個角色禁用、删除功能，可以分别定義辨別為role_disable、role_delete，如果擁有role_delete權限即可，即使沒有user_delete權限，也可以直接删除使用者，否則就不要給其role_delete權限。
使用者登入後，從資料庫擷取其所擁有的的權限清單并存入vuex，包含頁面和功能對應關系，例如頁面name為user：{user: ['user_delete', 'user_query']}，頁面中根據删除按鈕可以v-if="hasPermission('user_delete')"判斷即可。
頁面功能管理：
擷取使用者擁有的權限：
角色
一個角色類似于一個身份或崗位，每個角色有自己的權限範圍。
1.一個角色可以擁有多個頁面權限。
2.一個角色可以擁有多個功能權限。
角色管理：
使用者
使用者可以建立、删除，一個使用者随時可能變更工作内容，或者身兼數職，是以可以為其配置設定一個或者多個角色，他擁有的角色的權限就是他的權限。此時已經可以打通權限前端的權限配置設定，使用者-角色-頁面權限、功能權限。
前端效果
前端頁面菜單效果：
後端權限
傳統前後端不分離的情況下，路由都在後端統一管理，簡單的方法比如使用者管理頁面/user/那麼他裡面使用的接口都使用/user/add、/user/delete等相同字首，那麼隻要判斷使用者擁有/user/權限就可以通路/user/*所有接口。
前後端分離後面臨的問題：
接口
方案：
1.需要控制權限的接口進行上傳管理（可以做成管理頁面）
2.每個頁面和功能可以關聯多個接口，比如使用者頁面關聯了使用者查詢接口和使用者編輯接口，使用者删除功能關聯使用者删除接口
3.後端對請求的路徑進行判斷，使用者->角色->頁面/功能->接口，擁有接口權限即允許通路
4.前後端分團隊開發，不容易一一對照，且前端有自己的路由（此路由受限于代碼組織結構）等等，無法使用傳統方式簡單處理
5.相同的接口可能會被前端多個頁面多次利用
【雲栖号線上課堂】每天都有産品技術專家分享！
課程位址：
https://yqh.aliyun.com/zhibo立即加入社群，與專家面對面，及時了解課程最新動态！
【雲栖号線上課堂 社群】
https://c.tb.cn/F3.Z8gvnK
原文釋出時間：2020-04-21
本文作者：網際網路架構師
本文來自：“
網際網路架構師 微信公衆号”，了解相關資訊可以關注“
網際網路架構師”