前言

大家好，我是Jade。好久沒寫文章了，最近正好解決了一個bug，以此來記錄一下，共勉~
事情是這樣的，由于最近也是換了新工作，所以接手了一個新的項目。入職第一天，老板找我談話

老板：Jade，我們的客戶端系統(tǒng)切換菜單有時候會閃動，你有空和你們前端的同事一起探討一下解決一下這個問題我：......當然no problem ~

看到這里，各位大佬們可以先想一下可能出現(xiàn)bug的原因

拋出問題

在我回到自己的工位上后，開始啟動項目，嘗試復現(xiàn)bug，很可惜 無果。隨后我詢問了我同事，他和我說這個是個存在很久的bug了，而且因為不是百分百復現(xiàn)，自己也嘗試改過，但是還是不行。看來從他這里是得不到有用的信息了，隨后我找到了我們測試組長，向他了解更多有關(guān)bug的一些信息。他說道：這個bug偶爾會出現(xiàn)一次，但是大部分時間是正常的，從書簽地址欄和官網(wǎng)跳轉(zhuǎn)或重新打開都會有這個問題出現(xiàn)，而且是一直來回閃動，必須要手動刷新頁面才行。隨后又進行幾次的詢問，我總結(jié)以下幾點......

1. 很難復現(xiàn)，有可能一天，有可能好幾天，時有時無
2. 出現(xiàn)的情況是路由反復橫跳，需要手動刷新
3. 從公司官網(wǎng)或書簽或新建窗口打開都有這種情況
4. 前端同事告知項目不是部署在根目錄下的，所以配置了base路由前綴
5. 最開始出現(xiàn)問題是路由前綴會出現(xiàn)多次，改過一版后出現(xiàn)2的問題
6. 項目配置了nginx

查找問題 1

首先得知上面這么多信息，我第一反應就是要重現(xiàn)bug，但是點了半天也重現(xiàn)不了。隨后f12查看了一下console也沒有任何報錯信息。

因為手頭上還有別的事情做，所以我就把這個放了兩三天。等我下次進來時，確實發(fā)生了頁面一直來回閃。從上面的幾點描述中，我一眼就定位到base路由前綴問題，打開項目配置文件查看一下（項目使用的是umijs）

來，看一下官方對這兩個配置的解釋

這里的publicPath是配置靜態(tài)資源的，因為是路由來回閃動所以從base下手，看了一下打包后的代碼

通過源碼發(fā)現(xiàn)，base配置會在window上掛載一個routerBase并在每個路由前加上base

查找問題 2

通過查看source和配置文件并沒有解決什么問題，我一度懷疑是不是配置文件寫錯了，在umi和antd pro的官網(wǎng)以及對應的github倉庫上，查找是否有相同的issue，很可惜也是無果，因為很難復現(xiàn)。此時已經(jīng)過去了一個星期

查找問題 3

后續(xù)查找問題的過程中，聽同事說配置了nginx而且產(chǎn)物也確實在/kehuduan目錄下。難不成是nginx配置文件的問題？匹配路由的規(guī)則寫錯了，導致重定向和瀏覽器沖突嗎？帶著這個疑問我思考了許久，發(fā)現(xiàn)了一個遺漏的很重要點。那就是這個bug一段時間才會出現(xiàn)一次

排除問題

其實我一直都忽略了上面那點，屬實馬大哈了??
通過這點其實很容易想到和登錄過期時間有關(guān)，下面只要確定是前端過期的代碼問題還是nginx的問題。隨后我問了后端同事登錄過期時間是12h，過期后會刷新token。ok，把過期時間改為兩分鐘，坐等復現(xiàn)。

穩(wěn)定發(fā)揮，看圖說話（也就是從投訴咨詢跳到首頁，不管從哪切換到哪，都會有這個問題）

這下總算定位到了問題的原因，這里復現(xiàn)時不會出現(xiàn)閃動，因為我把我同事的代碼注釋了，他說過最開始是路由前綴重復，我同事為了路由前綴不重復修改代碼如下（但是會導致頁面閃動，/a/b和/a/a/b來回跳）

解決問題

問題已經(jīng)定位到了，就是登錄過期刷新token后的處理邏輯有問題，所以只要檢查這部分代碼邏輯就可以了。通過代碼知道是在登陸過期后做了一次重定向，大致如下??。

gotoRedirect方法里用的window.location.pathname獲取路由，如：當前路由是/a/b，則pathname就是/a/b又由于我們設置了base是/a，則跳轉(zhuǎn)后會變成/a/a/b 就會出現(xiàn)路由前綴重復且頁面404只要改寫一下方法就ok了

至此這個磨人的bug就解決了?

總結(jié)

這篇文章用來記錄一下解決bug的新路歷程，確實有太多阻礙了，比如因為剛接手項目，對業(yè)務邏輯和代碼不熟、不能復現(xiàn)（對客戶的影響還是挺大的，畢竟要手動刷新）、bug相關(guān)描述太少且模糊不清。所以對我來說定位問題還是有點難度的??。

不難免有的大佬，第一眼就知道是哪里問題（respect??），本文只是記錄一下。你也可以說我菜??