臺(tái)路由需求

根據(jù)用戶權(quán)限獲取菜單（也就是路由信息），動(dòng)態(tài)加載到路由當(dāng)中，實(shí)現(xiàn)正常路由切換。

1、最開(kāi)始的實(shí)現(xiàn)方式

用戶登錄—>接口獲取當(dāng)前用戶的菜單信息—>格式化菜單信息（格式化成，路由格式）—>使用router.addRoutes動(dòng)態(tài)加入路由。

實(shí)現(xiàn)結(jié)果：

路由添加成功，并且能正常的跳轉(zhuǎn)。但是，當(dāng)我刷新頁(yè)面后頁(yè)面路由出錯(cuò)了，直接進(jìn)入了錯(cuò)誤頁(yè)面404。

問(wèn)題原因：

vue在初始化的時(shí)候，vue-router的實(shí)例對(duì)象已經(jīng)生成了，當(dāng)前路由只包含了如登錄頁(yè)和404等靜態(tài)頁(yè)面，用戶權(quán)限獲取的路由需要在登錄成功后單獨(dú)請(qǐng)求權(quán)限接口再動(dòng)態(tài)添加到路由當(dāng)中，所以頁(yè)面在刷新的時(shí)候頁(yè)面會(huì)找不到對(duì)應(yīng)動(dòng)態(tài)的路由。

2、當(dāng)前的問(wèn)題在于刷新后

vue和vue-router重新初始化會(huì)跳過(guò)權(quán)限接口的請(qǐng)求和添加動(dòng)態(tài)路由。

本人也卡在這個(gè)地方一下午，后面看了網(wǎng)上的處理方式和代碼，也整理了一份適應(yīng)自己項(xiàng)目的處理方式。

最終的思路

在路由的導(dǎo)航守衛(wèi)router.beforeEach中判斷當(dāng)前是頁(yè)面刷新還是路由切換，利用vuex的狀態(tài)值在頁(yè)面刷新就會(huì)重新初始化的特新和本地緩存localStorage存的登錄狀態(tài)值來(lái)判斷頁(yè)面刷新還是路由切換。

整體的實(shí)現(xiàn)方式如下:

最終的實(shí)現(xiàn)方式

注意點(diǎn)：我在vuex中緩存了用戶權(quán)限的接口返回的數(shù)據(jù)，可以根據(jù)需要存放在本地還是vuex都是可以的

1、用戶登錄—> 本地緩存用戶token和id

vuex中存入登錄用戶id（存的具體那個(gè)值,對(duì)還是錯(cuò)都不重要，值只是用來(lái)判斷頁(yè)面刷新還是路由切換，隨意存。。只是用于后續(xù)的判斷） —>接口獲取當(dāng)前用戶的菜單信息—>格式化菜單信息（格式化成，路由格式）—>使用router.addRoutes動(dòng)態(tài)加入路由。

2、在導(dǎo)航守衛(wèi)router.beforeEach的方法中

進(jìn)入路由后，判斷

• 1、本地緩存的token是否有值，沒(méi)有的話，說(shuō)明用戶沒(méi)有登錄過(guò)，直接跳轉(zhuǎn)登錄頁(yè)面
• 2、token值有的，vuex中的用戶id存在的話，頁(yè)面只是路由切換，用next讓路由正常流轉(zhuǎn)下去
• 3、token值有的，vuex中的用戶id的值不存在的話，說(shuō)明頁(yè)面刷新了，這個(gè)時(shí)候需要做兩個(gè)件事情，

A：設(shè)置vuex中的id的為本地緩存的用戶id ，

B：重新請(qǐng)求權(quán)限接口，格式化后，動(dòng)態(tài)添加到路由，然后重新用next實(shí)現(xiàn)接下來(lái)的路由跳轉(zhuǎn)，這里需要注意，請(qǐng)求的權(quán)限接口需要用async/wait 改成同步接口方便使用。

步驟1具體代碼如下圖所示：

• 其中標(biāo)的數(shù)字1標(biāo)示的是：本地緩存用戶token和id，
• 標(biāo)的數(shù)字2的是：vuex中存入登錄用戶id，
• 標(biāo)數(shù)字3是：，接口請(qǐng)求后，格式化后，并使用router.addRoutes動(dòng)態(tài)加入路由

步驟2的代碼實(shí)現(xiàn)方式如下圖所示：

• 其中標(biāo)注的1是：判斷本地token的值，沒(méi)有token的話，直接跳轉(zhuǎn)登錄頁(yè)面，
• 標(biāo)注2是：token值有的，vuex中的用戶id存在的話，頁(yè)面只是路由切換，用next讓路由正常流轉(zhuǎn)下去 ，
• 標(biāo)注3：token值有的，vuex中的用戶id的值不存在的話，說(shuō)明頁(yè)面刷新了，這個(gè)時(shí)候需要做兩個(gè)件事情，

A：設(shè)置vuex中的id的為本地緩存的用戶id ，

B：重新請(qǐng)求權(quán)限接口，格式化后，動(dòng)態(tài)添加到路由，然后重新用next實(shí)現(xiàn)接下來(lái)的路由跳轉(zhuǎn)

下圖是管理vuex中的欄目的，前面說(shuō)了，可以更具使用情況，緩存本地還是vuex中，只是存放的地方和路由的格式化，路由的格式化，需要根據(jù)需要自己格式化

總結(jié)

1、vue項(xiàng)目在初始化后，vue-router的實(shí)例后生成的路由只包含靜態(tài)路由，就是那些寫(xiě)死的路由

2、動(dòng)態(tài)路由添加本人認(rèn)為最核心的不是router.addRoutes，這個(gè)大家都會(huì)，是如何判斷當(dāng)前頁(yè)面是路由切換還是頁(yè)面刷新，

上面已經(jīng)說(shuō)了思路，也有代碼，可以多試試

這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論