后臺(tái)管理系統(tǒng)的權(quán)限及vue處理權(quán)限實(shí)例分析

這篇文章主要介紹了后臺(tái)管理系統(tǒng)的權(quán)限及vue處理權(quán)限實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇后臺(tái)管理系統(tǒng)的權(quán)限及vue處理權(quán)限實(shí)例分析文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

　　一、名詞解釋?zhuān)?/strong>

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

　　功能級(jí)權(quán)限：

　　表示不同的角色（或者用戶(hù)）進(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ō)是富客戶(hù)端（前端），但是，比起現(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)專(zhuān)員、項(xiàng)目經(jīng)理、程序員等等。

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

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

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

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

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

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

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

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

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

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

　　登錄功能-->輸入用戶(hù)名和密碼-->前端發(fā)送用戶(hù)名和密碼-->后端接收到用戶(hù)名和密碼-->找數(shù)據(jù)庫(kù)（驗(yàn)證用戶(hù)名和密碼）--驗(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)生該用戶(hù)對(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)前用戶(hù)的路由權(quán)限。

　　created（） {

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

　　if （this.roles） {

　　//this.allRoutes是所有的路由配置，可以放在vueX中，以下代碼是，根據(jù)后端返回的權(quán)限，產(chǎn)生該用戶(hù)對(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ò)的。

關(guān)于“后臺(tái)管理系統(tǒng)的權(quán)限及vue處理權(quán)限實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“后臺(tái)管理系統(tǒng)的權(quán)限及vue處理權(quán)限實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。