首頁(yè) 猿問(wèn) 關(guān)于阻塞react render的問(wèn)題

關(guān)于阻塞react render的問(wèn)題

JavaScript

手掌心 2019-03-08 14:14:04

情況是這樣的，登錄后，我將用戶的token存在了localStorage中，然后用戶刷新或者重啟瀏覽器后，我會(huì)在在初始化的時(shí)候從localStorage中取出token,然后發(fā)送一個(gè)攜帶token的請(qǐng)求到后臺(tái)，然后根據(jù)返回token是否過(guò)期的結(jié)果，來(lái)決定是否重定向到登錄頁(yè)面，現(xiàn)在的問(wèn)題是，render()不會(huì)等待我的請(qǐng)求，那請(qǐng)問(wèn)怎么實(shí)現(xiàn)，讓render等待我的請(qǐng)求呢？<Auth path="/exchangeRecord" component={ExchangeRecord} />ExchangeRecord是一個(gè)組件，Auth是用來(lái)攔截的容器組件

查看完整描述

2 回答

慕雪6442864

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊

在前后端分離的情況下，不建議cookie和session。fetch默認(rèn)都不會(huì)帶cookie的。
樓主說(shuō)的思路沒(méi)有問(wèn)題，也是通用解決方案。
就是為什么要讓render等待fetch呢？完全沒(méi)有必要。
你可以嘗試如下操作：
頁(yè)面跳轉(zhuǎn)或者加載組件依賴接口返回的數(shù)據(jù)時(shí)，你就等到fetch返回再操作，就是放到then中,這之前再加一級(jí)then,在此判斷返回狀態(tài)。
所以，當(dāng)服務(wù)端判斷token失效，返回一個(gè)特定的狀態(tài)碼。在then中直接處理掉，一般history.push(login page),然后清除localstorage.