最近搭建了公司的后臺(tái)管理系統(tǒng)， 而且系統(tǒng)還比較龐大， 要實(shí)現(xiàn)以下幾點(diǎn)：

到目前為止還在構(gòu)建中， 已經(jīng)解決菜單權(quán)限和操作權(quán)限。

菜單權(quán)限：

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

最后的解決思路是完全不在本地做任何路由配置， 登錄頁面單獨(dú)弄，不放到vue組件里面， 登錄成功后從后臺(tái)抓取菜單列表， 因?yàn)楝F(xiàn)在是已經(jīng)登錄成功了，所以抓取的就是擁有全新的菜單。 抓取成功后在配置到路由里面，然后實(shí)例化vue , 這樣就避免了本地配置一套路由了，完全是服務(wù)器上面配置路由。

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

main.js代碼片段：

// 實(shí)例化Login類并初始化 new Login(function (err, data) {  if (err) {   // 登錄出錯(cuò)  } else {   // 登錄成功   init(data);  } }).init();const init = function (data) { // 先配置路由信息 // componentConfigs 是本地的組件配置 let routers = assignRouter(data.menus, componentConfigs); // 實(shí)例化路由 router = new Router({routes: routers}); // 再實(shí)例化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') }}

服務(wù)器返回的菜單json:

其中meta 字段里面是當(dāng)前路由里的操作權(quán)限

[{      "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}}      }]    }]