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

