后臺系統(tǒng)的權(quán)限控制與管理
前端權(quán)限和后端權(quán)限的區(qū)別在哪兒？有了后端權(quán)限為什么還要前端權(quán)限？前端需要后端給出怎樣的權(quán)限數(shù)據(jù)？本文圍繞這三個問題，講解了前端權(quán)限控制思路以及在Vue中的實現(xiàn)。
權(quán)限相關(guān)概念權(quán)限的分類后端權(quán)限從本質(zhì)上來講前端僅僅只是視圖層的展示，權(quán)限的核心是在于服務(wù)器中的數(shù)據(jù)變化，所以后端才是權(quán)限的關(guān)鍵，后端權(quán)限可以控制某個用戶是否能夠查詢數(shù)據(jù)，是否能夠修改數(shù)據(jù)等操作。
目前被大家廣泛采用的兩種權(quán)限模型為：基于角色的訪問控制（RBAC）和基于屬性的訪問控制（ABAC），二者各有優(yōu)劣：
RBAC模型（用戶、角色、權(quán)限）構(gòu)建起來更加簡單，缺點在于無法做到對資源細粒度地授權(quán)（都是授權(quán)某一類資源而不是授權(quán)某一個具體的資源）。
ABAC模型構(gòu)建相對比較復(fù)雜，學(xué)習(xí)成本比較高，優(yōu)點在于細粒度和根據(jù)上下文動態(tài)執(zhí)行。
一般項目中使用的是RBAC模型。
前端權(quán)限前端權(quán)限的控制本質(zhì)是控制前端視圖層的展示和前端所發(fā)送的請求，但是前端的權(quán)限都是可以通過技術(shù)手段破解的，不能將系統(tǒng)安全寄希望于前端。
前端權(quán)限的意義如果僅從能夠修改服務(wù)器中數(shù)據(jù)庫的數(shù)據(jù)層面上講，確實只在后端做控制就足夠了，進行前端權(quán)限控制的好處主要如下：
僅展示用戶權(quán)限內(nèi)的內(nèi)容，避免界面誤導(dǎo)用戶，提高用戶體驗
排除不必要的請求，減輕服務(wù)器壓力
前端權(quán)限控制思路路由控制在登錄請求中會得到權(quán)限的數(shù)據(jù)。前端根據(jù)權(quán)限去動態(tài)生成路由，只允許用戶訪問權(quán)限內(nèi)的路由，如果通過地址欄去訪問權(quán)限外的路由會重定向至404頁面(無論登錄了還是沒登錄)。
按鈕控制同一頁面還可能因為權(quán)限不同展示不同的按鈕。
請求和響應(yīng)的控制如果用戶通過非常規(guī)操作，比如通過瀏覽器調(diào)試工具將某些禁用的按鈕變成啟用狀態(tài)。此時發(fā)的請求，也應(yīng)該被前端所攔截。
Vue權(quán)限控制的實現(xiàn)獲取權(quán)限信息一般權(quán)限信息會在用戶登錄后由后端返回，具體如何控制權(quán)限要看前端是如何與后端約定的。在查找資料并結(jié)合個人項目經(jīng)驗后，我總結(jié)有以下有三種常見的方式。
后端返回權(quán)限表或路由表這種方式常見于管理員可以添加新角色，并且要給這個角色分配菜單。拿到的數(shù)據(jù)大概如下：
{"data":{"id":1,"username":"admin","token":"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImlhdCI6MTY1MzM1NzIyNH0.1y-Ucq_MfFRloesg0eA9pfk-VA3pV_zAOSj3HFpnKak"},"rights":[{"id":125,"authName":"用戶管理","icon":"icon-user","children":[{"id":110,"authName":"用戶列表","path":"users","rights":["view","edit","add","delete"]}]},{"id":103,"authName":"角色管理","icon":"icon-juese","rights":["view","edit","add","delete"]}]}data中是用戶信息，其中重點關(guān)注token字段，需要在客戶端對其進行持久化處理。
sessionStorage.setItem('token',res.token);在請求需要鑒權(quán)的接口時，需要將其放在請求頭中傳給后端。
權(quán)限表rights經(jīng)過處理可以生成前端需要的路由表（這里展示的是父子結(jié)構(gòu)，也可能拿到是一維數(shù)組，需要前端自己處理），如果返回的是路由表則無需額外的處理。
后端返回角色對于一些小項目來說，后端可能不想返回路由表，前端也覺得加一個頁面要后端改一下太麻煩了。更常見的情況，后端會告訴前端用戶的角色，數(shù)據(jù)大概如下：
{"data":{"id":1,"username":"admin","token":"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImlhdCI6MTY1MzM1NzIyNH0.1y-Ucq_MfFRloesg0eA9pfk-VA3pV_zAOSj3HFpnKak","roles":['admin','editr']}}roles字段代表了用戶的角色，用數(shù)組是因為一個用戶可能有多個角色。路由表由前端來維護并根據(jù)角色動態(tài)生成。
前端根據(jù)用戶信息判斷角色查找的資料中這種情況比較少，但是我經(jīng)常碰到這種情況，后端返回的用戶信息如下所示：
{"data":{"id":1,"username":"admin","token":"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImlhdCI6MTY1MzM1NzIyNH0.1y-Ucq_MfFRloesg0eA9pfk-VA3pV_zAOSj3HFpnKak","level":1，"units":{"id":1,"name":"部門1"}}}一開始后端告訴你通過level字段判斷權(quán)限，你很快寫好了方法。隨著業(yè)務(wù)的變動，產(chǎn)品提出了新的需求，增加了管理員，后端告訴你：
當(dāng)username為admin時角色是管理員。
過了一段時間，又告訴你：
當(dāng)units為null時是特殊角色，只有導(dǎo)入數(shù)據(jù)的權(quán)限。
那可能會寫出這樣一個方法來判斷用戶的權(quán)限等級：
functiongetUserAuthority(){constuserInfo=JSON.parse(sessionStorage.getItem('userData')).currentUserInfo;const{username,units}=userInfo;if(units===null)return-1;if(username==='admin')return0;returnunits?.level;}盡管數(shù)據(jù)庫中表還是原來的表，但是從前端的角度來看，假設(shè)原先level只有1、2、3三個等級，相當(dāng)于三個角色，現(xiàn)在則是變成了5個角色。
路由控制的實現(xiàn)全局前置守衛(wèi)判斷是否登錄先判斷跳轉(zhuǎn)的是不是登錄頁（或其他路由白名單中的頁面）
是-->直接放行
否-->獲取sessionStorage中的token，有則放行，空則跳轉(zhuǎn)登錄頁
//router/index.jsrouter.beforeEach((to,from,next)=>{//1.如果訪問的是登錄頁面（無需權(quán)限），直接放行if(to.path==='/login')returnnext();//2.如果訪問的是有登錄權(quán)限的頁面，先要獲取tokenconsttoken=sessionStorage.getItem('token');//2.1如果token為空，強制跳轉(zhuǎn)到登錄頁面；否則，直接放行if(!token){Message.error('需要登錄權(quán)限，請登錄后再試');returnnext('/login');}returnnext();});動態(tài)路由一般來說vue-element-admin中路由分為兩種：不需要權(quán)限判斷的路由、需要動態(tài)判斷權(quán)限的路由，下面就是不需要權(quán)限判斷的路由。
constroutes=[{path:'/',name:'Home',component:HomeLayout,redirect:'/menu/one',children:[]},{path:'/login',name:'Login',component:Login},{path:'*',name:'NotFound',component:NotFound},]constrouter=newVueRouter({routes})動態(tài)路由處理的整體思路就是：根據(jù)權(quán)限生成路由，添加到路由表；當(dāng)用戶切換，權(quán)限發(fā)生改變時，清空動態(tài)添加的路由。
對于后端直接返回路由表，代碼大概如下：
//路由拼接functionloadView(view){return()=>import(`@/views/${view}`)}//路由過濾和跳轉(zhuǎn)asyncfunctiononFilterRoutes(to,next,e){constroutes=awaitfilterASyncRoutes(e)//路由過濾routes.sort((a,b)=>a['id']-b['id'])routes.forEach(item=>{router.options.routes.push(item)router.addRoute(item)})next({...to,replace:true})}//路由過濾遍歷路由轉(zhuǎn)換為組件對象和路徑functionfilterASyncRoutes(data){constroutes=data.filter(item=>{if(item["component"]==="Layout")item.component=Layoutelseitem["component"]=loadView(item["component"])//路由遞歸，轉(zhuǎn)換組件對象和路徑if(item["children"]&&item["children"].length>0)item["children"]=filterASyncRoutes(item.children)returntrue})returnroutes}上面的代碼參考自掘金-《vue實現(xiàn)用戶登錄驗證+權(quán)限驗證+動態(tài)路由（左側(cè)菜單欄）》
不使用router.addRoutes方法是因為其在vuerouterv3.x中被廢棄
對于后端返回權(quán)限表、后端返回角色信息、前端根據(jù)用戶信息判斷角色這三種情況，則稍微麻煩一些，需要經(jīng)過映射轉(zhuǎn)換生成路由后，再使用router.addRoute方法加入路由表。
映射轉(zhuǎn)換的規(guī)則需要由前端來維護。
Tips:
另外，盡管VueRouter3.x的文檔中提到：
當(dāng)使用通配符路由時，請確保路由的順序是正確的，也就是說含有通配符的路由應(yīng)該放在最后。
但經(jīng)我實測后發(fā)現(xiàn)，含有通配符的路由放在最前面并不會影響后面路由的匹配。
按鈕控制的實現(xiàn)最容易想到的就是v-if，但這樣每有一個按鈕就要寫一段邏輯判斷，不夠簡潔。考慮到復(fù)用性，可以定義自定義指令來封裝邏輯，并給合路由元信息meta使用。
在根目錄下新建directives/index.js，然后在main.js中引入，頁面中使用v-permission即可，具體代碼如下：
//頁面中的使用，action控制展示，effect控制禁用v-permission="{action:'add'}"v-permission="{action:'delete',effect:'disabled'}"//directives/index.jsimportVuefrom'vue'Vue.directive('permission',{inserted(el,binding){const{action,effect}=binding.value//根據(jù)路由中元信息meta來判斷是否具備對應(yīng)的權(quán)限if(router.currentRoute.meta.indexOf(action)===-1){if(effect==='disabled'){//如果是禁用添加'disable'樣式el.disabled=trueel.classList.add('is-disabled')}else{//否則就移除節(jié)點el.parentNode.removeChild(el)}}}})sessionStorage.setItem('token',res.token);0請求和響應(yīng)的控制的實現(xiàn)請求攜帶token可以通過請求攔截器interceptors.request來攜帶token，代碼如下：
sessionStorage.setItem('token',res.token);1token的校驗導(dǎo)航守衛(wèi)只能簡單地對token的有無進行檢查，并不能校驗其合法性。
使用響應(yīng)攔截器可以處理token不合法的情況（超時或篡改），具體代碼如下：
sessionStorage.setItem('token',res.token);2攔截不應(yīng)該發(fā)送的請求同樣要使用請求攔截器,修改代碼如下:
sessionStorage.setItem('token',res.token);3上面的代碼對請求的類型進行映射出的權(quán)限與路由meta中的權(quán)限進行比較，然而實際開發(fā)中增刪改查可能只用到get或者post，那么可能要將url作為key值，維護好actionMapping這個對象。
總結(jié)前端權(quán)限控制可以提高用戶體驗，減輕服務(wù)器壓力，但是最后一道保障仍然是在后端。在做權(quán)限控制時總體思路是最重要的，好的思路能避免因業(yè)務(wù)的變動而修改大段代碼。
參考bilibili-后臺系統(tǒng)的權(quán)限控制與管理
掘金-vue實現(xiàn)用戶登錄驗證+權(quán)限驗證+動態(tài)路由（左側(cè)菜單欄）
掘金-淺析vue-router源碼和動態(tài)路由權(quán)限分配
原文：https://juejin.cn/post/7101548981469052958后臺管理系統(tǒng)的權(quán)限以及vue處理權(quán)限的思路
功能表存儲管理系統(tǒng)的所有功能；角色表記錄項目角色，如總經(jīng)理、市場部經(jīng)理等；角色與功能對應(yīng)表明確角色與功能的關(guān)聯(lián)；用戶表則包含所有登錄用戶的詳細信息，其中包含角色信息。基于這些信息，系統(tǒng)可以依據(jù)用戶登錄時獲取的角色，進而確定其能訪問的功能，并在導(dǎo)航欄展示給用戶。隨著前端技術(shù)的盛行，權(quán)限處理...
客戶關(guān)系管理系統(tǒng)前臺系統(tǒng)和后臺系統(tǒng)的區(qū)別
1. 前臺系統(tǒng)與后臺系統(tǒng)的主要區(qū)別在于權(quán)限和功能。前臺系統(tǒng)是面向用戶的界面，用戶可以通過它查看內(nèi)容，但沒有權(quán)限進行修改或刪除操作。例如，一個網(wǎng)頁的前臺展示給用戶瀏覽，但用戶無法更改網(wǎng)頁內(nèi)容。2. 后臺系統(tǒng)則是管理人員使用的，它允許登錄的管理員對內(nèi)容、欄目進行添加、修改和刪除等操作。后臺通常...
權(quán)限管理在哪里找
角色這一概念的引入，極大地增加了權(quán)限管理系統(tǒng)配置的靈活性和便捷性。創(chuàng)建賬號時，可以將不同的角色配置在同一個賬號上，也可以給不同的賬號配置相同的角色。創(chuàng)建角色時，可以根據(jù)角色的差異賦予其不同的權(quán)限。3、權(quán)限 （1）數(shù)據(jù)權(quán)限 控制賬號可看到的數(shù)據(jù)范圍。舉例說明，風(fēng)控系統(tǒng)中，負責(zé)不同區(qū)域的...
廣播系統(tǒng)如何進行用戶管理和權(quán)限控制?
在常用的后臺管理系統(tǒng)中，通常都會有權(quán)限系統(tǒng)設(shè)計，以用于給對應(yīng)人員分配不同權(quán)限，控制其對后管系統(tǒng)中的某些菜單、按鈕以及列表數(shù)據(jù)的可見性。本文將用 waynboot-mall 項目舉例，給大家介紹常見后管系統(tǒng)的權(quán)限控制該如何設(shè)計。大綱如下，權(quán)限模型 要理解權(quán)限控制，我們需要先了解什么是權(quán)限模型。權(quán)限模型是...
臺式電腦無法打開控制面板的原因(深入解析臺式電腦控制面板無法打開的...
一、系統(tǒng)權(quán)限設(shè)置問題 -無法打開控制面板的原因可能是由于當(dāng)前用戶權(quán)限不足，需要管理員權(quán)限。-解決方法：右鍵點擊控制面板圖標(biāo)，選擇“以管理員身份運行”，輸入管理員賬戶和密碼，即可打開控制面板。二、惡意軟件感染問題 -有時候，惡意軟件感染可能導(dǎo)致控制面板無法打開。-解決方法：運行安全軟件進行全盤掃描...
旅游網(wǎng)站建設(shè)方案后臺系統(tǒng)有哪些功能
旅游網(wǎng)站建設(shè)方案后臺系統(tǒng)通常需要包含以下功能：用戶管理：用于管理網(wǎng)站的注冊用戶，包括用戶信息的查看、編輯和刪除等。權(quán)限管理：控制不同用戶角色對后臺系統(tǒng)功能的訪問權(quán)限，確保數(shù)據(jù)安全。內(nèi)容管理：管理網(wǎng)站上發(fā)布的旅游相關(guān)內(nèi)容，如文章、圖片、視頻等。可以進行發(fā)布、編輯、刪除和排序等操作。產(chǎn)品管理：...
MCGS如何刪除用戶權(quán)限管理?
企業(yè)IT管理員一般都能為系統(tǒng)定義角色，給用戶分配角色。這就是最常見的基于角色訪問控制。場景舉例：1、給張三賦予“人力資源經(jīng)理”角色，“人力資源經(jīng)理”具有“查詢員工”、“添加員工”、“修改員工”和“刪除員工”權(quán)限。此時張三能夠進入系統(tǒng)，則可以進行這些操作；2、去掉李四的“人力資源經(jīng)理”角色，...
深化互聯(lián)互通 中天智領(lǐng)智慧交互指揮臺系統(tǒng)實現(xiàn)全局掌控
智慧交互指揮臺系統(tǒng)引入了現(xiàn)代指揮中心所需的領(lǐng)導(dǎo)駕駛艙智慧化、數(shù)字化和可視化功能，通過實時監(jiān)控、多維操作，使得指揮中心能夠快速響應(yīng)復(fù)雜多變的環(huán)境，實現(xiàn)信息的快速整合與決策的精準下達。智慧交互指揮臺系統(tǒng)具備多項先進功能，如多屏聯(lián)控、權(quán)限分級管理、畫面自由推送、多屏幕一秒切換、系統(tǒng)信號遠程控制、...
如何獲得管理員權(quán)限?
點擊屏幕左下角開始按鈕，選擇 控制面板。打開控制面板后，點擊 用戶賬戶和家庭安全。打開后點擊 用戶賬戶。用戶賬戶頁面點擊 管理用戶賬戶。進入賬戶列表頁面，點擊想要修改改的賬戶，然后點擊 屬性。進入屬性頁面后依次點擊 組成員—其他里面選擇管理員，選擇之后點擊啟用。設(shè)置完成之后，點擊進行重啟即可啟用...
系統(tǒng)權(quán)限設(shè)計思路方法總結(jié)
幾乎所有的管理后臺都會涉及到權(quán)限的設(shè)計,權(quán)限控制是管理后臺的重要功能,可以有效的提高系統(tǒng)的安全性,減少誤操作、數(shù)據(jù)泄漏等風(fēng)險的發(fā)生。但是,很多產(chǎn)品經(jīng)理會對權(quán)限功能有一點害怕的心理,一方面是由于能參考的實例較少,權(quán)限管理算是一個“系統(tǒng)級”的基礎(chǔ)功能,一般系統(tǒng)中只有管理員可以操作,不像其他功能可以通過去其他...
相關(guān)評說：
武夷山市鼓風(fēng)： ______ 后臺管理系統(tǒng)大概分為以下幾方面:一、(后臺使用人員)角色管理(包含權(quán)限管理);因為后臺管理系統(tǒng)面向的人物種類較多,比如運營,產(chǎn)品,衍生部門以及老板還有產(chǎn)品經(jīng)理等,在后臺管理中,有些數(shù)據(jù)是只能某個部門的人員才能修改,...
武夷山市鼓風(fēng)： ______ 權(quán)限模塊就是 分配權(quán)限的 ,騷年!!! ,控制訪問級別
武夷山市鼓風(fēng)： ______ 你是想自己寫后管理系統(tǒng),還是就為有一個后臺權(quán)限呀? 如果是后臺管理系統(tǒng),你就按照登錄那樣做就可以,在里面可以再加限制訪問頁面 如果登錄成功,則可以進入后臺系統(tǒng)如果不登錄或登錄失敗,都讓它跳轉(zhuǎn)到一個指定的頁面,進行錯誤的報告,然后讓登錄的人從新登錄
武夷山市鼓風(fēng)： ______ 樓上的你是剽竊ACEGI的做法,你自己做一個我看看----------------- 我都做了N個了.ACEGI是什么東西,我聽都沒通說過.我目前正打算做一個基于webservice的通用權(quán)限管理系統(tǒng),到時候,不管什么樣系統(tǒng),只要遠程調(diào)用我的權(quán)限管理系統(tǒng)的...
武夷山市鼓風(fēng)： ______ java web 項目的系統(tǒng)權(quán)限管理設(shè)計方法有兩種: 方法一、SpringMVC整合Shiro (Shiro是強大的權(quán)限管理框架) 參考:http://www.360doc.com/content/14/0529/09/11298474_381916189.shtml 方法二、基于角色的訪問權(quán)限控制 基于角色的訪問權(quán)限控制 首先基于角色的訪問權(quán)限控制,所有的用戶訪問都會經(jīng)過過濾,然后分析訪問權(quán)限加以認證!權(quán)限中的重點,表的設(shè)計. 普遍三張表,表名自定義.用戶表(User),角色表(Role),資源表(Resource) 用戶表沒有特別,很簡單.關(guān)鍵是角色表和資源表.
武夷山市鼓風(fēng)： ______ 之前我做過一次,是用自定義標(biāo)簽庫來做的,在前臺jsp里面通過對表單的控制來達到不同權(quán)限看到不同內(nèi)容的目的的...
武夷山市鼓風(fēng)： ______ 有人員信息表,角色表,角色功能表,對每一個功能也就是沒一個頁面的不同按鈕設(shè)置權(quán)限這個功能按鈕的權(quán)限是應(yīng)該在角色表中設(shè)計好,還是在加一個功能按鈕權(quán)限表
武夷山市鼓風(fēng)： ______ 用戶權(quán)限,菜單可以使用RBAC權(quán)限模型,可以參考一些開源的軟件,比如springside,jeesite等,這些軟件中都已經(jīng)包括了你提到的基礎(chǔ)功能,你只需要增加你的業(yè)務(wù)功能即可.
武夷山市鼓風(fēng)： ______ 簡單說下我在自己的框架中設(shè)計的思路:權(quán)限系統(tǒng)分權(quán)限定義和實際的權(quán)限數(shù)據(jù)2部分.這2部分要求都是可自定義任意擴展的.權(quán)限定義分2個表:permit, permit_rightspermit:idname??use_extralabelpermit_rights:idrightspermit_idlabel這2個表構(gòu)...
武夷山市鼓風(fēng)： ______ 后臺主要是管理企業(yè)平臺的.
