Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁白屏問題
Antd Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁白屏
剛接手的一個(gè)項(xiàng)目,將靜態(tài)路由改為動(dòng)態(tài)路由,使用的是Ant Design Vue Pro框架。
其中遇到了點(diǎn)問題紀(jì)錄一下。
問題點(diǎn)
后端重啟服務(wù)器后,頁面過期重定向到登陸頁面,登錄之后繞過了permission.js中router.beforeEach()這個(gè)鉤子
所以里面的邏輯都沒有走,拿不到路由。
但是登錄會(huì)走登錄接口,跳轉(zhuǎn)首頁白屏,
解決方法
- 登錄的時(shí)候讓后端在返回值的時(shí)候帶上該賬戶的權(quán)限列表;
- 登陸成功后對權(quán)限進(jìn)行緩存;
- 在generator-routers.js中取該緩存下來的權(quán)限;
- 最重要的一點(diǎn)就是在request.js文件中請求攔截的時(shí)候移除掉緩存,同時(shí)千萬不要去調(diào)用resetRouter()這個(gè)方法,這個(gè)方法是重置路由的
// 重置路由 export function resetRouter () { const newRouter = createRouter() router.matcher = newRouter.matcher }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)
這篇文章主要介紹了在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09前端Vue學(xué)習(xí)之購物車項(xiàng)目實(shí)戰(zhàn)記錄
購物車是電商必備的功能,可以讓用戶一次性購買多個(gè)商品,下面這篇文章主要給大家介紹了關(guān)于前端Vue學(xué)習(xí)之購物車項(xiàng)目的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理
這篇文章主要為大家介紹了vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串
這篇文章主要介紹了Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串,需要的朋友可以參考下2018-10-10使用ElementUI寫一個(gè)前端分頁查詢的實(shí)例
本文主要介紹了使用ElementUI寫一個(gè)前端分頁查詢的實(shí)例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02關(guān)于Element-UI可編輯表格的實(shí)現(xiàn)過程
這篇文章主要介紹了關(guān)于Element-UI可編輯表格的實(shí)現(xiàn)過程,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07