用Vue/React這類雙向綁定框架做后臺系統再適合不過，后臺系統相比普通前端項目除了數據交互更頻繁以外，還有一個特別的需求就是對用戶的權限控制，那么如何在一個Vue應用中實現權限控制呢？下面是我的一點經驗。

權限控制是什么

在權限的世界里服務端提供的一切都是資源，資源可以由請求方法+請求地址來描述，權限是對特定資源的訪問許可，所謂權限控制，也就是確保用戶只能訪問到被分配的資源。具體的說，前端對資源的訪問通常是由界面上的按鈕發起，比如刪除某條數據；或由用戶進入某一個頁面發起，比如獲取某個列表數據。這兩種形式覆蓋了資源請求的大部分場景，因此權限控制也可以被籠統的分成菜單權限控制和按鈕權限控制。

Vue菜單權限控制

菜單是對路由的直接體現，菜單控制實際上就是路由控制。實現路由控制一個簡單的方式是，在路由的before鉤子里校驗當前即將跳轉的路由地址是否有權訪問，根據校驗結果決定路由是否放行，偽碼：

router.beforeEach((to, from, next) => {  //權限校驗  let pass = valid(to);  if(!pass){    return console.log('無權訪問');  }  next();});

這種實現方式既簡單又直觀，用于簡單的系統非常合適，但這么做本質上是將所有路由全部注冊了，直接帶來的缺點有兩個：一、如果路由組件不是按需加載的話，應用將加載大量冗余代碼；二、每次跳轉都要遍歷一次完整路由是對計算能力的浪費，對于路由總數較大的應用很不可取。

理想的實現方式是本地保存完整路由，但并不立即初始化Vue應用，待用戶登錄拿到權限后，用菜單權限篩選出可用路由，再用可用路由初始化Vue應用。也就是說，要將登錄頁獨立出去做成一個單獨的頁面，登錄后將用戶數據保存在本地，再通過url跳轉到Vue應用所在頁面，Vue應用啟動前通過本地用戶數據完成路由篩選，然后初始化Vue應用，偽碼如下：

//main.jslet user = sessionStorage.getItem('user');if (user) {  user = JSON.parse(user);  //篩選得到實際路由  let fullPath = require('fullPath.js');  let routes = filter(fullPath, user.menus);  //創建路由對象  let router = new Router({routes});  //生成Vue實例  new Vue({    el: '#app',    router,    render: h => h(App)  });}else{  location.href = '/login/';}

這樣我們就根據用戶權限生成了一套”定制”路由，這時我們還希望能直接用路由生成導航菜單，常規的路由數據可能無法滿足菜單組件的需求，所以我們可以事先在路由的meta數據里維護上菜單數據，比如菜單名稱菜單圖標等，只要在模板中通過$router.options就可以訪問到當前路由數據，如果使用element-ui的菜單組件實現，代碼大致是這樣的：