vue-router 權限控制的示例代碼

來源：懂視網責編：小采時間：2020-11-27 22:29:09

vue-router 權限控制的示例代碼

vue-router 權限控制的示例代碼:最近搭建了公司的后臺管理系統，而且系統還比較龐大，要實現以下幾點：菜單權限，根據不同權限顯示不同的菜單操作權限，比如有些賬號沒有新增權限，有些沒有修改或者刪除權限數據權限，比如統計概況，普通管理員不能看到公司營業概況，但能看到自

推薦度：

點擊下載本文 文檔為doc格式

導讀vue-router 權限控制的示例代碼:最近搭建了公司的后臺管理系統，而且系統還比較龐大，要實現以下幾點：菜單權限，根據不同權限顯示不同的菜單操作權限，比如有些賬號沒有新增權限，有些沒有修改或者刪除權限數據權限，比如統計概況，普通管理員不能看到公司營業概況，但能看到自

最近搭建了公司的后臺管理系統，而且系統還比較龐大，要實現以下幾點：

菜單權限，根據不同權限顯示不同的菜單

操作權限，比如有些賬號沒有新增權限，有些沒有修改或者刪除權限

數據權限，比如統計概況，普通管理員不能看到公司營業概況，但能看到自己所屬區域的概況

顯示權限，比如列表，運營能看到那一列的簽約金額，但市場不能看到簽約金額這一列

到目前為止還在構建中，已經解決菜單權限和操作權限。

菜單權限：

最開始的時候也是按照樓上給出的方法，本地先配置一套路由，然后登陸成功后會從服務器返回一個菜單列表，然后在beforeEach里面把返回的菜單列表和本地配置的路由進行對比，如果存在則有權限訪問。做了幾天發現很難用，本地得配置一整套路由，還得做幾個頁面來把這些路由信息寫入到服務器，這樣來進行權限分配，當你的權限菜單比較多的時候，像我們這個后臺，光公司內部權限就有好幾套，還有代理商、商家權限等等，不同的菜單可能會超過幾百個，這樣配置太累了，還容易出錯。

最后的解決思路是完全不在本地做任何路由配置，登錄頁面單獨弄，不放到vue組件里面，登錄成功后從后臺抓取菜單列表，因為現在是已經登錄成功了，所以抓取的就是擁有全新的菜單。抓取成功后在配置到路由里面，然后實例化vue , 這樣就避免了本地配置一套路由了，完全是服務器上面配置路由。

這樣解決的難點只有一個，那就是路由需要對應的組件，所以我們將所有組件存放到一個對象里面，服務器的返回的菜單列表里面，會有一個字段配置組件名，在抓取成功后生成路由配置的時候就使用 router[menuName]就能直接加載到這個組件，非常方便。

main.js代碼片段：

// 實例化Login類并初始化
 new Login(function (err, data) {
 if (err) {
 // 登錄出錯
 } else {
 // 登錄成功
 init(data);
 }
 }).init();

const init = function (data) {
 // 先配置路由信息
 // componentConfigs 是本地的組件配置
 let routers = assignRouter(data.menus, componentConfigs);
 // 實例化路由
 router = new Router({routes: routers});
 // 再實例化vue
 new Vue({
 el: '#app',
 store,
 router,
 nprogress,
 ...App
 });
};

componentConfigs.js 代碼片段：

export default {
 Common: {
 Admin: require('../../vue/pages/common/Admin'),
 Index: require('../../vue/pages/common/Index'),
 UpdatePassword: r => require.ensure([], () => r(require('../../vue/pages/users/UpdatePassword')), 'users')
 }
}

服務器返回的菜單json:

其中meta 字段里面是當前路由里的操作權限

[{
 "path": "\/admin\/index",
 "name": "\u9996\u9875",
 "component": "Common.Index",
 "display": true,
 "icon": "icon-home"
 }, {
 "path": "\/admin\/updatePassword",
 "name": "\u4fee\u6539\u5bc6\u7801",
 "component": "Common.UpdatePassword",
 "display": false
 }, {
 "path": "\/admin\/commodity",
 "name": "\u5546\u54c1\u7ba1\u7406",
 "component": "Content",
 "display": true,
 "icon": "icon-class",
 "children": [{
 "path": "\/admin\/commodity\/publicWarehouse",
 "name": "\u516c\u5171\u5e93\u7ba1\u7406",
 "component": "Commodity.PublicWarehouse",
 "display": true,
 "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
 }, {
 "path": "\/admin\/commodity\/businessesWarehouse",
 "name": "\u5546\u5bb6\u5e93\u7ba1\u7406",
 "component": "Commodity.BusinessesWarehouse",
 "display": true,
 "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
 }]
 }]

菜單的權限大概就是這樣，至于操作權限，思路是這樣的：寫一個鑒權的vue插件，然后所有的操作獨立放到methods里面; 然后所有的操作 @click里面調用鑒權函數， $auth('add', arg1, arg2, ...argN) ; $auth里面判斷this.$route.meta 里是否有權限進行這個操作，如果有則調用 this[authName].apply(null, arg);

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue-router 權限控制的示例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 權限權限的

熱門焦點

vue-router 權限控制的示例代碼

vue-router 權限控制的示例代碼

vue-router 權限控制的示例代碼

最新推薦

猜你喜歡

熱門推薦