在項目當中，角色的權限管理是卡了挺久的一個難點。首先我們確定的權限控制分爲兩大部分，其中根據粒的大小分的更細：1、接口訪問的權限控制；2、頁面的權限控制：①菜單中的頁面是否能被訪問；②頁面中的按鈕（增、刪、改）的權限控制是否顯示。接口權限就是對用戶的校驗。正常來說，在用戶登錄時服務器需要給前臺返回一個Token,然後在以後前臺每次調用接口時都需要帶上這個Token,然後服務端獲取到這個Token後進行比對，如果通過則可以訪問。現有的做法是在登錄成功的回調中將後臺返回的Token直接存儲到sessionStorage，然在請求時將Token取出放入headers中傳給後臺，代碼如下：
後來發現axios可以在攔截器中直接將Token塞入config.headers.Authorization中，作爲全局傳入。下面是代碼部分：
頁面權限控制又分爲兩種：1、菜單中的頁面是否能被訪問；2、頁面中的按鈕（增、刪、改）的權限控制是否顯示。這些權限一般是在固定頁面進行配置，保存後記錄到數據庫中。按鈕權限暫且不提，頁面訪問權限在實現中又可以分爲兩種方式：1、顯示所有菜單，當用戶訪問不在自己權限內的菜單時，提示權限不足；2、只顯示當前用戶能訪問的權限內菜單，如果用戶通過URL進行強制訪問，則會直接進入404。
創建路由表實際上沒有什麼難度，但是因爲有部分頁面是不需要訪問權限的，所以需要將登錄、404、維護等頁面寫到默認的路由中，而將其它的需要權限的頁面寫到一個變量或者一個文件中，這樣可以有效的減輕後續的維護壓力。下面將index.js的代碼貼上，異步路由將適量減少，以免佔過多篇幅。
頁面訪問權限在開始時我們梳理了一個大致的頁面訪問權限流程，我們首先獲取用戶權限列表，在這裏我們將接觸到vuex狀態管理，下面請看代碼：
我們現在請求後臺拿到了權限數據，並將數據存放到了vuex中，下面我們需要利用返回數據匹配之前寫的異步路由表，將匹配結果和靜態路由表結合，開成最終的實際路由表。其中最關鍵的是利用vue-router2.2.0版本新添加的一個addRoutes方法，那我們現在就可以開始使用addRoutes進行路由匹配了。下面看代碼：
然後我們編寫導航鉤子
到這裏我們已經完成了對頁面訪問的權限控制，接下來我們來看操作按鈕的數據操作權限
爲每個路由頁面增加meta字段。在routerMatch函數中將匹配到的詳細權限字段賦值到這裏。這樣在每個頁面的route對象中就會得到這個字段。
接下來我們直接註冊一個全局指令，利用vnode來訪問vue的方法。代碼如下：
至此爲止，權限控制流程就已經完全結束。