最近搭建了公司的后臺管理系統， 而且系統還比較龐大， 要實現以下幾點：
到目前為止還在構建中， 已經解決菜單權限和操作權限。
菜單權限：
最開始的時候也是按照樓上給出的方法，本地先配置一套路由，然后登陸成功后會從服務器返回一個菜單列表，然后在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": "http://admin//index", "name": "/u9996/u9875", "component": "Common.Index", "display": true, "icon": "icon-home" }, { "path": "http://admin//updatePassword", "name": "/u4fee/u6539/u5bc6/u7801", "component": "Common.UpdatePassword", "display": false }, { "path": "http://admin//commodity", "name": "/u5546/u54c1/u7ba1/u7406", "component": "Content", "display": true, "icon": "icon-class", "children": [{ "path": "http://admin//commodity//publicWarehouse", "name": "/u516c/u5171/u5e93/u7ba1/u7406", "component": "Commodity.PublicWarehouse", "display": true, "meta": {"handleAuth": {"add": true, "edit": false, "del": true}} }, { "path": "http://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);
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
