1.安裝axios，創(chuàng)建請求和響應(yīng)攔截器，建立環(huán)境變量文件，模擬獲得token和userInfo接口。

?????終端中運行? npm i axios 安裝axios。在/src目錄下創(chuàng)建utils/request.js 用來封裝請求。同時在項目根目錄下創(chuàng)建env環(huán)境變量文件( .env.development為開發(fā)時環(huán)境變量，.env.production為生成時環(huán)境變量?)。 axios.create的baseURL使用環(huán)境變量，因為每次修改環(huán)境變量都需要重新編譯才能生效，所以平時開發(fā)的時候為了省時都是直接在此添加一行實際用到的Url（切記提交代碼前改為使用環(huán)境變量的 (づ╥﹏╥)づ 之前忘記了2次導(dǎo)致生產(chǎn)環(huán)境請求了測試環(huán)境服務(wù)器，教訓(xùn)?。?。

?request.js中主要做了創(chuàng)建axios實例并攔截請求和響應(yīng)，做一些處理。實際項目中根據(jù)需要在請求攔截中附加token，在響應(yīng)攔截中根據(jù)后端返回的響應(yīng)碼做對應(yīng)的處理。

request.js大概代碼：

2. 創(chuàng)建測試api。在src/下創(chuàng)建apis目錄，生成login.js用來處理和登錄相關(guān)的api。這里測試只用了login登錄和getInfo獲得用戶信息兩個接口

然后在之前views/Login.vue測試頁面中簡單寫一個輸入用戶名+密碼以及一個登錄按鈕。點擊登錄按鈕dispatch登錄操作對應(yīng)的loginFn，拿到token并存儲到state中；后繼續(xù)dispatch獲得用戶信息對應(yīng)的getUserInfo拿到roles和userInfo并存儲到state中。這里獲得token后存到了本地，取的時候也從本地取，本地沒有時默認(rèn)為''，防止刷新后store中數(shù)據(jù)丟失又需要重新登錄。

Login.vue中dispatch獲得用戶信息后就可以跳轉(zhuǎn)到首頁了。

3. 到這里就只需要根據(jù)用戶的role過濾出他有權(quán)限看的頁面的路由動態(tài)生成左側(cè)導(dǎo)航菜單，并且使用router.beforeEach路由守衛(wèi)進(jìn)行權(quán)限判斷攔截處理。

之前為了測試，router/index.js中new VueRouter時傳入的routes為所有路由，現(xiàn)在改為只傳入不需要權(quán)限就能訪問的constantRoutes；同時把store/index.js中的state中 routes 改為空數(shù)組，新增2個方法，調(diào)用getUserInfo后拿到rules根據(jù)用戶角色從所有路由中過濾能訪問的路由數(shù)據(jù)賦值給state中的routes。

filterAsyncRoutes方法中，在有子路由即有children情況下使用遞歸處理：

在/src下生成permission.js進(jìn)行路由守衛(wèi)，并在main.js中引入。代碼僅提供思路參考，實際根據(jù)項目完善異常處理

到這里根據(jù)用戶角色生成動態(tài)路由全部實現(xiàn)思路走了一遍。實現(xiàn)方式只是多種優(yōu)秀方式中的一種，這4篇關(guān)聯(lián)文章僅供自己記錄實現(xiàn)思路回顧用，如有見解歡迎交流