本文主要跟大家介紹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);
#相關推薦：
以上是vue-router實作權限控制方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
