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

一、名詞解釋：

權(quán)限的意思不用再做解釋。

• 功能級(jí)權(quán)限：
  表示不同的角色（或者用戶）進(jìn)入系統(tǒng)后，看到的功能不一樣，或者說(shuō)，可以操作的功能不一樣。有的系統(tǒng)的處理思路是：不能操作的功能就根本不會(huì)讓你看到；有的系統(tǒng)的處理思路是：你可以看見(jiàn)所有的功能，但是，有些功能的頁(yè)面根本看不見(jiàn)，操作不成。當(dāng)然，我個(gè)人認(rèn)為，前者更好。例如：HIS系統(tǒng)里，醫(yī)生可以開(kāi)處方。護(hù)士就不可以。
• 數(shù)據(jù)級(jí)權(quán)限：
  表示你可以進(jìn)入某個(gè)功能。但是
  1、不一定能夠看到所有的數(shù)據(jù)
  2、對(duì)看到的數(shù)據(jù)不一定能夠進(jìn)行增刪改查的操作。例如：0A系統(tǒng)中，你只能看到自己的考勤數(shù)據(jù)，而且，不能添加、修改和刪除。但是，人事小姐姐可以看到所有人的考勤數(shù)據(jù)，而且，還可以做修改等操作。

二、后臺(tái)管理系統(tǒng)的（功能級(jí)）權(quán)限處理思路

1．沒(méi)有前端的時(shí)代（前端的人如果看不懂，可以略過(guò)此部分）

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

所以，都是有后端的程序來(lái)處理權(quán)限的。后端程序結(jié)合數(shù)據(jù)庫(kù)來(lái)處理權(quán)限的。

思路：

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

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

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

角色與功能的對(duì)應(yīng)表：這表示的是，什么樣的角色具備什么樣的功能。

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

樣的話，用戶和功能之間就有了關(guān)系

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

2．前端盛行的當(dāng)下：

當(dāng)下，前后端分離。所以，權(quán)限可以由后端處理，也可以由前端處理。

1）、后端處理權(quán)限的思路：

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

2）、前端處理權(quán)限的思路（不推薦）：

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

登錄功能-->輸入用戶名和密碼-->前端發(fā)送用戶名和密碼-->后端接收到用戶名和密碼-->找數(shù)據(jù)庫(kù)(驗(yàn)證用戶名和密碼)--驗(yàn)證通過(guò)時(shí)-->返回前端（同時(shí)，返回角色）-->前端根據(jù)角色對(duì)應(yīng)的功能權(quán)限，展示對(duì)應(yīng)的功能。

三、使用vue完成后臺(tái)管理系統(tǒng)的（功能級(jí)）權(quán)限：

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

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

1、步驟

1）、默認(rèn)路由配置里只有登錄的配置。

import Vue from 'vue'; import VueRouter from "vue-router"; import Login from "@/pages/Login"; Vue.use(VueRouter); //把vue-router安裝到Vue。 // 創(chuàng)建vue-router對(duì)象 let router = new VueRouter({mode: "hash", //路由模式routes: [{path: "/",redirect: "/Login"},{path: "/Login",component: Login}] });export default router;

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

axios({url: `/roles`,method: "get",params: {username: this.username,userpass: this.userpass} }).then(res => {let roles = res.data[0].data;//this.allRoutes是所有的路由配置，可以放在vueX中，以下代碼是，根據(jù)后端返回的權(quán)限，產(chǎn)生該用戶對(duì)應(yīng)的路由配置let currRoutes = this.allRoutes.filter(item => {return roles.some(obj => obj.path == item.path);});//把獲取到的權(quán)限保存到sessionStorage中sessionStorage.setItem("roles", JSON.stringify(roles));//把獲取到的權(quán)限，動(dòng)態(tài)增加到vue-Router對(duì)象里this.$router.addRoutes(currRoutes);this.$router.push("/Home"); });

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

created() {this.roles = JSON.parse(sessionStorage.getItem("roles"));if (this.roles) {//this.allRoutes是所有的路由配置，可以放在vueX中，以下代碼是，根據(jù)后端返回的權(quán)限，產(chǎn)生該用戶對(duì)應(yīng)的路由配置let currRoutes = this.allRoutes.filter(item => {return this.roles.some(obj => obj.path == item.path);});this.$router.addRoutes(currRoutes);} }

2、特別注意：

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

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

下面是全部代碼網(wǎng)盤鏈接：

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。