后臺管理系統的權限及vue處理權限實例分析

這篇文章主要介紹了后臺管理系統的權限及vue處理權限實例分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇后臺管理系統的權限及vue處理權限實例分析文章都會有所收獲，下面我們一起來看看吧。

　　一、名詞解釋：

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

　　功能級權限：

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

　　例如：HIS系統里，醫生可以開處方。護士就不可以。

　　數據級權限：

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

　　1、不一定能夠看到所有的數據

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

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

　　二、后臺管理系統的（功能級）權限處理思路

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

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

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

　　思路：

　　1）需要在數據庫中建表，一般包括：

　　功能表：存儲著管理系統的所有功能

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

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

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

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

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

　　2.前端盛行的當下：

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

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

　　登錄功能-->輸入用戶名和密碼-->前端發送用戶名和密碼-->后端接收到用戶名和密碼-->找數據庫（驗證用戶名和密碼）--驗證通過時-->找數據庫（用戶名--->角色--->功能）-->獲取到該用戶的功能-->發送給前端-->前端根據獲取到的功能，循環顯示出該功能。

　　2）、前端處理權限的思路（不推薦）：

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

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

　　三、使用vue完成后臺管理系統的（功能級）權限：

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

　　使用vue-router的addRoutes來動態改變路由配置。

　　1、步驟

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

　　import Vue from 'vue';

　　import VueRouter from "vue-router";

　　import Login from "@/pages/Login";

　　Vue.use（VueRouter）; //把vue-router安裝到Vue。

　　// 創建vue-router對象

　　let router = new VueRouter（{

　　mode: "hash", //路由模式

　　routes: [{

　　path: "/",

　　redirect: "/Login"

　　},

　　{

　　path: "/Login",

　　component: Login

　　}

　　]

　　}）;

　　export default router;

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

　　axios（{

　　url: ——/roles——，

　　method: "get",

　　params: {

　　username: this.username,

　　userpass: this.userpass

　　}

　　}）。then（res => {

　　let roles = res.data[0].data;

　　//this.allRoutes是所有的路由配置，可以放在vueX中，以下代碼是，根據后端返回的權限，產生該用戶對應的路由配置

　　let currRoutes = this.allRoutes.filter（item => {

　　return roles.some（obj => obj.path == item.path）;

　　}）;

　　//把獲取到的權限保存到sessionStorage中

　　sessionStorage.setItem（"roles", JSON.stringify（roles））;

　　//把獲取到的權限，動態增加到vue-Router對象里

　　this.$router.addRoutes（currRoutes）;

　　this.$router.push（"/Home"）;

　　}）;

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

　　created（） {

　　this.roles = JSON.parse（sessionStorage.getItem（"roles"））;

　　if （this.roles） {

　　//this.allRoutes是所有的路由配置，可以放在vueX中，以下代碼是，根據后端返回的權限，產生該用戶對應的路由配置

　　let currRoutes = this.allRoutes.filter（item => {

　　return this.roles.some（obj => obj.path == item.path）;

　　}）;

　　this.$router.addRoutes（currRoutes）;

　　}

　　}

　　2、特別注意：

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

　　以上步驟是經過測試通過的。

關于“后臺管理系統的權限及vue處理權限實例分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“后臺管理系統的權限及vue處理權限實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。