最近看了AntDesignPro關於權限控制的官方文檔以及自己框架里權限控制的實現，總結一下。
先貼一下官網上關於權限控制的圖有利於理解
步驟如下:
- 判斷是否有
AccessToken如果沒有則跳轉到登錄頁面 - 獲取用戶信息和擁有權限
store.dispatch('GetInfo') - 用戶信息獲取成功后, 調用
store.dispatch('GenerateRoutes', userInfo)根據獲取到的用戶信息構建出一個已經過濾好權限的路由結構(src/store/modules/permission.js) - 將構建的路由結構信息利用
Vue-Router提供的動態增加路由方法router.addRoutes加入到路由表中 - 加入路由表后將頁面跳轉到用戶原始要訪問的頁面,如果沒有
redirect則進入默認頁面 (/dashboard/workplace)
大概思路是在用戶登陸時拿到該用戶的角色，根據角色可以知道該角色對應有哪些菜單，然后通過一個邏輯方法 將這些從數據庫拿來的菜單數據進行處理(遞歸處理子菜單，加入映射的組件等)，篩選並組合成router所需要的數據格式的數組，最終在路由守衛中將這個數組router.addRoutes（）添加到路由中
其實不管是動態路由還是mock數據，最終都是處理成一樣的符合路由結構的一個數組后進行router.addRoutes（）。
我的框架中菜單的權限實際上已經在接口中被過濾掉了，拿到的數據都是該角色有權限的菜單，下圖中的permission參數在antdvpro中指的是指令權限，也就是action級別的權限
action級別的權限控制，在組件上加上v-action:[method]，即可實現自行判斷權限
