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

成都一家集口碑和實力的網(wǎng)站建設(shè)服務商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術(shù)，10年企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都近1000家客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務,包括成都營銷型網(wǎng)站建設(shè)，品牌網(wǎng)站建設(shè)，同時也為不同行業(yè)的客戶提供網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計的服務,包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務商就選創(chuàng)新互聯(lián)公司。

　　一、名詞解釋：

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

　　功能級權(quán)限：

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

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

　　數(shù)據(jù)級權(quán)限：

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

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

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

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

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

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

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

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

　　思路：

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

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

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

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

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

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

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

2.前端盛行的當下：

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

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

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

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

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

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

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

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

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

　　1、步驟

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

import Vue from 'vue';

import VueRouter from "vue-router";

import Login from "@/pages/Login";

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

// 創(chuàng)建vue-router對象

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對象的addRoutes方法把該路由配置動態(tài)添加到路由對象里。同時，把該路由配置保存到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)生該用戶對應的路由配置

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)限，動態(tài)增加到vue-Router對象里

this.$router.addRoutes（currRoutes）;

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

}）;

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

created（） {

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

if （this.roles） {

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

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

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

}）;

this.$router.addRoutes（currRoutes）;

}

}

　　2、特別注意：

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

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

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