vue後臺系統路由菜單動態權限控制

需求：

現有一個後臺管理系統，涉及到用戶權限菜單的問題，即不一樣的用戶登陸，根據權限的不一樣展現不一樣的菜單。

回答：

實現思路

第一種方法： 動態添加路由，將完整路由整合到一塊兒，並從路由表中提取出菜單；
一、先將不須要權限（靜態）的頁面先掛載到new Router路由實例上，並export出去。
二、當用戶登陸後，獲取用戶的權限信息，而後根據用戶的權限（role或某個標識）調後端接口取到路由表。
三、調用router.addRoutes(store.getters.addRouters)添加用戶可訪問的路由（注意：這裏有個hack方法  next({ ...to, replace:true}) // hack方法 確保addRoutes已完成 ,setthe replace:trueso the navigation will not leave ahistoryrecord })
四、將全部的路由表存到根標籤內（也有將路由表存到vuex裏，根據vuex中的路由表來渲染菜單）

第二種方法：將路由和菜單分開，前端徹底控制路由，菜單從後端獲取。
一、前端控制整個系統的完整路由，自行進行增減路由表。
二、根據用戶權限調後端接口獲取可訪問的菜單列表，並根據數據規則進行重組。
三、將獲取的菜單數據列表Array綁定到菜單SideBar上，渲染側邊欄組件 。

值得說明的是，這些頁面級別的權限控制，雖然已經在前端作了，可是隻在前端作是不夠的，後端也依然要作接口層面的權限控制。