一般來說，在(后臺)管理系統(tǒng)(最早的企業(yè)級的項目和網(wǎng)站的后臺管理系統(tǒng)現(xiàn)在大部分人都叫后臺管理系統(tǒng))中才會有權限之說。權限分為功能級權限和數(shù)據(jù)級權限。這篇文章主要談論功能級權限。

　　一、名詞解釋：

　　權限的意思不用再做解釋。

　　· 功能級權限：

　　表示不同的角色(或者用戶)進入系統(tǒng)后，看到的功能不一樣，或者說，可以操作的功能不一樣。有的系統(tǒng)的處理思路是：不能操作的功能就根本不會讓你看到;有的系統(tǒng)的處理思路是：你可以看見所有的功能，但是，有些功能的頁面根本看不見，操作不成。當然，我個人認為，前者更好。

　　例如：HIS系統(tǒng)里，醫(yī)生可以開處方。護士就不可以。

　　· 數(shù)據(jù)級權限：

　　表示你可以進入某個功能。但是

　　1、不一定能夠看到所有的數(shù)據(jù)

　　2、對看到的數(shù)據(jù)不一定能夠進行增刪改查的操作。

　　例如：0A系統(tǒng)中，你只能看到自己的考勤數(shù)據(jù)，而且，不能添加、修改和刪除。但是，人事小姐姐可以看到所有人的考勤數(shù)據(jù)，而且，還可以做修改等操作。

　　二、后臺管理系統(tǒng)的(功能級)權限處理思路

　　1.沒有前端的時代(前端的人如果看不懂，可以略過此部分)

　　沒有前端的時代，可以認為是全棧時代。那時候，程序員要完成前后端的所有功能。雖說是富客戶端(前端)，但是，比起現(xiàn)在前端流行的時代，那是小巫見大巫了。

　　所以，都是有后端的程序來處理權限的。后端程序結合數(shù)據(jù)庫來處理權限的。

　　思路：

　　1)需要在數(shù)據(jù)庫中建表，一般包括：

　　功能表：存儲著管理系統(tǒng)的所有功能

　　角色表：存儲著，整個項目的角色，其實就是公司中的角色，如：總經(jīng)理、市場部經(jīng)理、市場專員、項目經(jīng)理、程序員等等。

　　角色與功能的對應表：這表示的是，什么樣的角色具備什么樣的功能。

　　用戶表：可以登錄管理系統(tǒng)的所有用戶，用戶表里會存儲所屬角色。這

　　樣的話，用戶和功能之間就有了關系

　　2)(后端)程序，根據(jù)登錄的用戶名，沿著 用戶名--->角色--->功能 這樣的步驟，取到該用戶對應的功能。然后，把這些功能顯示在導航欄的區(qū)域就行，這也就是，用戶登錄后，只能看到自己具備的功能的思路。

　　2.前端盛行的當下：

　　當下，前后端分離。所以，權限可以由后端處理，也可以由前端處理。

　　1)、后端處理權限的思路：

　　登錄功能-->輸入用戶名和密碼-->前端發(fā)送用戶名和密碼-->后端接收到用戶名和密碼-->找數(shù)據(jù)庫(驗證用戶名和密碼)--驗證通過時-->找數(shù)據(jù)庫(用戶名--->角色--->功能)-->獲取到該用戶的功能-->發(fā)送給前端-->前端根據(jù)獲取到的功能，循環(huán)顯示出該功能。

　　2)、前端處理權限的思路(不推薦)：

　　首先，需要把權限保存在前端，這樣會寫死。所以，不推薦。以下是思路：

　　登錄功能-->輸入用戶名和密碼-->前端發(fā)送用戶名和密碼-->后端接收到用戶名和密碼-->找數(shù)據(jù)庫(驗證用戶名和密碼)--驗證通過時-->返回前端(同時，返回角色)-->前端根據(jù)角色對應的功能權限，展示對應的功能。

　　三、使用vue完成后臺管理系統(tǒng)的(功能級)權限：

　　此處，還是以“后端處理權限的思路”，前端僅作功能權限的展示為例，進行描述。

　　使用vue-router的addRoutes來動態(tài)改變路由配置。

　　1、步驟

　　1)、默認路由配置里只有登錄的配置。

　　2)、登錄成功后，后端返回功能權限，最好直接就是路由配置，如果不是，前端把功能權限處理成路由配置的json數(shù)組格式。使用vue-router對象的addRoutes方法把該路由配置動態(tài)添加到路由對象里。同時，把該路由配置保存到sessionStorage里(防止前端刷新后丟失路由配置)。

　　3)、前端在“App.vue”里的created里，需要讀取cookie里或sessionStorage里保存的路由配置，同樣需要把讀取到的路由配置，使用vue-router對象的addRoutes方法把該路由配置動態(tài)添加到路由對象里。這樣刷新頁面時，就可以在此處獲取到當前用戶的路由權限。

　　2、特別注意：

　　一定要把獲取到的權限數(shù)組存放到sessionStorage。否則，刷新頁面時，路由配置就會丟失掉。

　　以上步驟是經(jīng)過測試通過的。

　　更多關于html5培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。