一般來說，在（后臺）管理系統（最早的企業級的項目和網站的后臺管理系統現在大部分人都叫后臺管理系統）中才會有權限之說。權限分為功能級權限和數據級權限。這篇文章主要談論功能級權限。

一、名詞解釋：

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

• 功能級權限：
  表示不同的角色（或者用戶）進入系統后，看到的功能不一樣，或者說，可以操作的功能不一樣。有的系統的處理思路是：不能操作的功能就根本不會讓你看到；有的系統的處理思路是：你可以看見所有的功能，但是，有些功能的頁面根本看不見，操作不成。當然，我個人認為，前者更好。例如：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。否則，刷新頁面時，路由配置就會丟失掉。

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

下面是全部代碼網盤鏈接：

鏈接：https://pan.baidu.com/s/1ShL9jADEzEIBuCiYBtEoSw提取碼：tfxr千鋒HTML5學院：如何講清楚函數防抖？?zhuanlan.zhihu.com千鋒HTML5學院：如何講清楚函數節流？?zhuanlan.zhihu.com千鋒HTML5學院：如何講清楚閉包？?zhuanlan.zhihu.com

總結

以上是生活随笔為你收集整理的动态后台获取_后台管理系统的权限以及vue处理权限的思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。