前端小誌(轉型中)

一個用來記錄人老會忘記的地方

在React life cyle中做async

2017年07月30日
最近需要幫網站加入權限的機制,到底該怎們將權限加入React中

由於公司是走oauth2.0,oauth2.0的官網在SPA推薦的是implicit flow,在npm也可以找到此部分的套件,但這不是這篇文章的重點,重點在於接完之後,該如何進行下一步驗證。

通常SPA要驗證一定會有一個flag或一組key,來做後續的動作,當然server端一定也要驗證,不然我前台亂輸入flag與key,資料就全部被弄出來了,以oauth來說我們就必須將accessToken當作前台的一個驗證。

這邊我的作法如下

確認是否有token -> request api取得個人資訊 -> 有了才登入 沒有就是假token

所以我們可以在首次render SPA的時候(也就是使用者第一次點開你的網頁的時候)進行request api的行為。

那到底要放在componentWillMount還是componentDidMount呢

componentWillMount

在Component Render之前就會執行,但是fetch資料屬於非同步,render並不會等待,此時還拿不到init state,有可能會出錯,必須自己在constructor先init state,詳情見此,會render多次。

componentDidMount

就跟上面做了個對比,是比較建議放入ajax的地方,也會render多次。

不過剛好最近出了v0.16,依照這篇文章來看,componentWillMount似乎是個好選擇(我還沒有驗證)

若是與redux連接,可以在provider的那層(通常是app),componentWillMount的時候執行store.dispatch(fn),似乎也蠻符合SPA的開發方式,有一些preload可以放在此處,不過實際上接的時候還是會遇到一些問題,之後再討論囉。


展開Disqus
分類
最近文章
友站連結
© 2019 Ernie Yang